vue嵌套路由

1、首先定义两个组件news.vue、message.vue

2、在index.js中将路由组件映射成路由表 

首先，导入import News from '../views/news.vue'

其次，在children中配置路由，其他写法同基本路由，注意path的不同

/**
 * Created by Administrator on 2018/12/3.
 */
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.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          //path:'/news',//path最左侧的/永远代表根路径，错误写法
          path:'/home/news', //正确写法
          component:News
        },
        {
          path:'message',  //简化写法
          component:Message
        },
        {
          path:'',
          redirect:'/home/news'
        }
      ]
    },
    {
      path:'/',
      redirect:'/about'
    }
  ]
})

3、上面两个路由嵌套在home.vue中，故在home.vue中使用

4、效果图如下