vue之嵌套路由

先说下vue嵌套路由

第一步先在components文件中再起个文件叫SubRouter文件然后在里面在创建个子路由组件叫Subrouter.vue。

第二步在router文件中引入import SubRouter from '../components/SubRouter/Subrouter.vue'

第三部在router文件里的index.js中配置子路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Header',这是你的路由页面
      name: 'Header',
      component: Header,
      children: [//这里是定义子路由方法
        {
          path: '/SubRouter/Sub',
          name: 'SubRouter',
          component: SubRouter
        }
      ]
    }
  ]
})

然后在你的一级路由中添加下面代码就可以了

<router-link to="/SubRouter/Sub">跳转子路由页面</router-link>
<router-view></router-view>