Vue嵌套路由的简单使用

嵌套路由用children,可写绝对路径也可写相对路径

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'

Vue.use(VueRouter);
export default new VueRouter({
 linkActiveClass:'active',//路由跳转时动态添加样式

  routes:[
    {
      path:'/',
      name:'主页面',
      redirect:'/about'
    },
    {
      path:'/about',
      name:'关于',
      component:About
    },
    {
      path:'/home',
      name:'主页',
      component:Home,
      children:[/*嵌套路由*/
        {
          path:'/home/message',/*根路径开始*/
          component:Message,
        },
        {
          path:'news',/*相对路径*/
          component:News,
        },
        {
          path:'',/*父路径默认显示的子路径页面*/
          redirect:'news'
        }
      ]
    },

  ]

})