Notice:vue-router 2 is only suitable for versions. Below we are based on how to use vue-router 2 to implement routing functions based on vue2.0.
It is recommended to use npm to install.
npm install vue-router
1. Use routing
In this, the routing function needs to be clearly installed:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './'
(VueRouter)
//1. Define the component, use import from other files hereimport index from './components/'
import hello from './components/'
//2. Define the routeconst routes = [
{ path: '/index', component: index },
{ path: '/hello', component: hello },
]
//3. Create a router instance and pass the `routes` configurationconst router = new VueRouter({
routes
})
//4. Create and mount the root instance. Inject routes through router configuration parameters, so that the entire application has routing functionsconst app = new Vue({
router,
render: h => h(App)
}).$mount('#app')
After the above configuration, the components matched by the route will be rendered to the <router-view></router-view>
Then this should be written like this:
<template>
<div >
<router-view></router-view>
</div>
</template>
Here is what I want to write:
<body> <div ></div> </body>
This will mount the rendered page to the div with the id as the app.
2. Redirect
const routes = [
{ path: '/', redirect: '/index'}, // In this way, it will jump to /index{ path: '/index', component: index }
]
3. Nested routing
const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
] }
]
You can access the info component through /index/info
4. Lazy loading
const routes = [
{ path: '/index', component: resolve => require(['./'], resolve) },
{ path: '/hello', component: resolve => require(['./'], resolve) },
]
By lazy loading, you won't load all components in at once, but will only load that component when you access that component. For applications with more components, the first loading speed will be increased.
5. <router-link>
In vue-router 1, <a v-link="{path:'/index'}"></a> is used
In vue-router 2, <router-link></router-link> was used to replace the a tag in version 1
<!-- String -->
<router-link to="home">Home</router-link>
<!-- Rendering results -->
<a href="home" rel="external nofollow" >Home</a>
<!-- use v-bind of JS expression -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- Don't write v-bind It's OK，就像绑定别of属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- Same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名of路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- With query parameters，下面of结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
6. Routing information object
1.$
A string, corresponding to the path of the current route, is always parsed into an absolute path, such as "/foo/bar".
2.$
A key/value object containing dynamic fragments and fully match fragments. If there are no routing parameters, it is an empty object.
3.$
A key/value object representing URL query parameters. For example, for the path /foo?user=1, there is $ == 1, and if there is no query parameter, it is an empty object.
4.$
The hash value of the current route (without #) , and if there is no hash value, it is an empty string.
5.$
Completed parsed URL, containing the complete path to query parameters and hash.
6.$
An array containing routing records for all nested path fragments of the current route. The routing record is a copy of the object in the routes configuration array (and in the children array).
Based on the above, one that contains redirection, nested routing, and lazy loading is as follows:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
(VueRouter)
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/index' },
{ path: '/index', component: resolve => require(['./components/'], resolve),
children:[
{ path: 'info', component: resolve => require(['./components/'], resolve) }
]
},
{ path: '/hello', component: resolve => require(['./components/'], resolve) },
]
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.