Vue——嵌套路由

路由

有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。

单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置

---

vue-Router

选择官方使用的vue-router库，因此要先准备环境

• 安装

$ npm install vue-router

---

安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js

• index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
   
	routes: []
})

---

然后在根入口文件中导入router，并配置到vue实例中。

• main.js

import router from './router'

 new Vue({
   
    el: '#app',
    components: {
   App},
    template: '<App/>',
    router
})

这样就能在各个模块中使用路由了。

---

实例

在src目录下创建views目录，分别创建about、home、news、message、detail的vue页面。

• 路由映射文件——index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message'
import Detail from '../views/detail.vue'

Vue.use(VueRouter)

export default new VueRouter({
   
    routes: [
        {
   path: '/', redirect: '/about'},
        {
   path: '/about', component: About},
        {
   
            path: '/home',
            component: Home,
            children: [
                {
   path: 'news', component: News},
                {
   
                    path: 'message'