Note: Vue-router 2 is only available for the vue2.x version, and here we are based on vue2.0 about how to use Vue-router 2 to implement the routing function.
It is recommended to use NPM installation.
NPM Install Vue-router
first, using routing
In Main.js, you need to explicitly install the routing feature:
Import Vue from ' Vue ' import vuerouter from ' vue-router ' import App from './app.vue ' vue.use (vuerouter)
1. Define components, which are used to import from other files
Import index from './components/index.vue ', ' import Hello from './components/hello.vue '
2. Define Routing
Const ROUTES = [
{path: '/index ', component:index},
{path: '/hello ', Component:hello},
]
3. Create router instance, then pass routes configuration
Const ROUTER = new Vuerouter ({
routes
})
4. Create and Mount Root instances. Inject routing through router configuration parameters, allowing the entire application to have routing capabilities
The const APP = new Vue ({
router,
render:h => H (APP)
}). $mount (' #app ')
After the above configuration, the component that the route matches to will be rendered into the App.vue <router-view></router-view>
So this app.vue should be written in this way:
<template>
<div id= "app" >
<router-view></router-view>
</div>
< /template>
Index.html to write this:
<body>
<div id= "app" ></div>
</body>
This will be the rendering of the page mount to this ID for the app Div.
Second, redirect redirect
Const ROUTES = [
{path: '/', redirect: '/index '}, //Will jump to/index
{path: '/index ', Component:index}< c12/>]
three, the nested routine by
Const ROUTES = [
{path: '/index ', Component:index,
children: [
{path: ' Info ', component:info}
]
}
]
The info component can be accessed through the/index/info
Four, lazy load
Const ROUTES = [
{path: '/index ', component:resolve => require (['./index.vue '], resolve)},
{path: '/hello ', Component:resolve => require (['./hello.vue '], resolve)},
]
Lazy loading does not load all components at once, but only when you access that component. More applications for components will increase the first load speed.
Five, <router-link>
In Vue-router 1, the use of the
In Vue-router 2, the <router-link></router-link> replace a label in the 1 version is used
<!--string--> <router-link to= "Home" >Home</router-link> <!--render results--> <a href= "Home" > home</a> <!--use v-bind JS expression--> <router-link v-bind:to= "Home" >Home</router-link> <!-- Do not write V-bind also can, just like binding other attributes like--> <router-link:to= "' Home ' >Home</router-link> <!--ditto--> < router-link:to= "{path: ' Home '}" >Home</router-link> <!--named Route--> <router-link:to= "{name: ' User ', Params: {userid:123}} ' >User</router-link> <!--with query parameters, the following result is/register?plan=private--> < router-link:to= "{path: ' register ', query: {plan: ' Private '}}" >Register</router-link> Vi. Routing Information Objects
1. $route. Path
A string that corresponds to the path of the current route and always resolves to an absolute path, such as "/foo/bar".
2. $route. Params
A Key/value object that contains a dynamic fragment and a fully matched fragment, or an empty object if there is no routing parameter.
3. $route. Query
A Key/value object that represents the URL query parameter. For example, for path/foo?user=1, there is $route. Query.user = 1, if there is no query parameter, it is an empty object.
4. $route. Hash
The hash value of the current route (without #), or an empty string if there is no hash value.
5. $route. FullPath
Complete the parsed URL, containing the query parameters and the full path of the hash.
6. $route. Matched
An array that contains the routing records for all nested path fragments of the current route. A routing record is a copy of an object in the routes configuration array (and an array of children).
To synthesize the above, a main.js that contains redirects, nested routines, and lazy loads is as follows:
Import Vue from ' Vue '
import vuerouter from ' vue-router '
import App from './app '
vue.use (vuerouter)
Const ROUTER = new Vuerouter ({
routes:[
{path: '/', redirect: '/index '},
{path: '/index ', component:resolv e => require (['./components/index.vue '], resolve),
children:[
{path: ' info ', Component:resolve => Require (['./components/info.vue '], resolve)}
]
},
{path: '/hello ', component:resolve => require ([' ./components/hello.vue '], resolve},
]
}) the
const APP = new Vue ({
router,
render:h => H (app )
. $mount (' #app ')
For more detailed Vue-router features please refer to the documentation: https://router.vuejs.org/zh-cn/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
