How to use routing by directly referencing vue.js
Directly quote the method of using routing in vue.js: first introduce [vue.JS] and [vue-router.JS]; then create the mounted dom element and create the routing component; then define the routing and Create a router instance; finally create a vue instance and mount it.
The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.
[Recommended related articles: vue.js]
Directly quote vue.js using routing:
It is very simple to use routing by directly introducing vue.js. You only need to directly introduce another vue-router.JS.
Specific implementation steps :
1, introduce vue.JS and vue-router.JS
<script src="https://unpkg.com/vue/dist/vue.js"> </script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"> </script>
2, create mounted dom element
<div id="app"></App>
3, create routing component
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}4, Define the route
const routes = [
{ path: '/hash1', component: com1 },
{ path: '/hash2', component: com2 }
]5, Create the router instance
const router = new VueRouter({
routes
})6, Create the vue instance and mount it
const App = new Vue({
router
}).$mount('#app');The following is the specific code:
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Document
</title>
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>
</head>
<body>
<div id="app">
<h1>
Hello !
</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/hash1">
切换至 com1
</router-link>
<router-link to="/hash2">
切换至 com2
</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view>
</router-view>
<!-- router-link 上的其他属性: -->
<!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
history 记录. -->
<!-- <router-link :to="{ path:'/abc'}" replace></router-link> -->
<!-- 有时候想要 <router-link> 渲染成某种标签, 例如 <li>. 于是我们使用
tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. -->
<!-- <router-link to="/foo" tag="li">foo</router-link> -->
<!-- active-class 设置 链接激活时使用的 CSS -->
<!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. -->
</div>
</body>
<script>
// 1. 定义 (路由) 组件.
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}
// 2. 定义路由
// 每个路由应该映射一个组件. 其中 "component" 可以是 通过 Vue.extend()
// 创建的组件构造器, 或者, 只是一个组件配置对象.
const routes = [{
path: '/hash1',
component: com1
},
{
path: '/hash2',
component: com2
}]
// 3. 创建 router 实例, 然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例.
// 要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
const App = new Vue({
router
}).$mount('#app'); //el 是自动挂载, mount 是手动挂载(延时)
</script>
</HTML>Related learning recommendations: js video tutorial
The above is the detailed content of How to use routing by directly referencing vue.js. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to Fix No Internet Security Issue on Windows 11/10
May 11, 2023 pm 10:07 PM
One of the internet connection related issues seen on Windows 11/10 computers is the “No internet, secure” error message. Basically, this error message indicates that the system is connected to the network, but due to issues with the connection, you are unable to open any web pages and receive data. You may encounter this error while connecting to any network in Windows, preferably when connecting to the Internet through a WiFi router that is not nearby. Normally, when you check the wireless icon in the lower right corner of your system tray, you'll see a small yellow triangle, and when you click it, a No Internet, Security message will appear. There is no specific reason why this error message occurs, but changes to configuration settings may cause your router to be unable to connect
3 Ways to Fix Router Lost Contact with NTP Time Server Error
May 22, 2023 pm 03:43 PM
Connection and WiFi issues can be very frustrating and significantly reduce productivity. Computers use Network Time Protocol (NTP) for clock synchronization. In most cases, if not all, your laptop uses NTP to track time. If your server has lost contact due to NTP time server error message, read this article to the end to learn how to fix it. What happens when the router's time is set incorrectly? Router performance is generally not affected by incorrect time settings, so your connection may not be affected. However, some problems may arise. These include: Incorrect time for all gadgets that use the router as a local time server. The timestamps in the router log data will be wrong. if due to
How to implement API routing in the Slim framework
Aug 02, 2023 pm 05:13 PM
How to implement API routing in the Slim framework Slim is a lightweight PHP micro-framework that provides a simple and flexible way to build web applications. One of the main features is the implementation of API routing, allowing us to map different requests to corresponding handlers. This article will introduce how to implement API routing in the Slim framework and provide some code examples. First, we need to install the Slim framework. The latest version of Slim can be installed through Composer. Open a terminal and
Java Apache Camel: Building a flexible and efficient service-oriented architecture
Feb 19, 2024 pm 04:12 PM
Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable
Use JavaScript functions to implement web page navigation and routing
Nov 04, 2023 am 09:46 AM
In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page
4 Ways to Find or View WiFi Password on Windows 11
Apr 23, 2023 pm 01:19 PM
Find WiFi password on Windows 11: Is it easy? Yes, you can easily view your saved WiFi passwords in Windows 11 using any of the methods mentioned below. You need administrator rights to view saved WiFi passwords on a specific device. Additionally, in some cases, devices paired with the router using WPS may not display the decrypted password. How to View Your WiFi Password on Windows 11 in 4 Easy Ways Here’s how to view your saved WiFi password in Windows 11. Follow any of the methods below based on your preferences and requirements. Method One: Use Control Panel to View WiFi Password
How to use routing in ThinkPHP6
Jun 20, 2023 pm 07:54 PM
ThinkPHP6 is a powerful PHP framework with convenient routing functions that can easily implement URL routing configuration; at the same time, ThinkPHP6 also supports a variety of routing modes, such as GET, POST, PUT, DELETE, etc. This article will introduce how to use ThinkPHP6 for routing configuration. 1. ThinkPHP6 routing mode GET method: The GET method is a method used to obtain data and is often used for page display. In ThinkPHP6, you can use the following
![How to Fix iPhone WiFi Keeps Disconnecting Repeatedly [Solved]](https://img.php.cn/upload/article/000/887/227/168456214865307.png?x-oss-process=image/resize,m_fill,h_207,w_330)
How to Fix iPhone WiFi Keeps Disconnecting Repeatedly [Solved]
May 20, 2023 pm 01:55 PM
Many iPhone users have expressed disappointment with one of the serious issues they face on their iPhone. The problem is that their iPhone disconnects from Wi-Fi every now and then. This is indeed a major issue since Wi-Fi is a necessity to use most apps on your iPhone. We have thoroughly analyzed this issue and identified the factors that may be responsible and listed them below. Auto-join settings are disabled Some issues in network settings Change Wi-Fi password Changed Wi-Fi router issues After looking into these factors mentioned above, we have compiled a set of solutions that can fix disconnection issues with Wi-Fi issues iPhone. Fix 1 – Turn on Wi-Fi’s auto-join setting if Wi-Fi is not enabled
