vue 嵌套路由

1.新建vue

2.配置子路由路径 index.js中

3.新增router-view标签

1.准备HomeNews.vue和HomeMsg.vue

HomeMsg.vue






HomeNews.vue





2.配置路由映射 这里需要注意子路由path不需要加 /

{
    path: '/home',
    name: 'Home',
    component: Home,
      children:[
          //子路由不需要加/
          {
              path: 'news',
              component: () => import(/* webpackChunkName: "about" */ '../views/HomeNews.vue')
          },
          {
              path: 'msg',
              component: () => import(/* webpackChunkName: "about" */ '../views/HomeMsg.vue')
          }
      ]
  },

3.配置router-view增加显示 这里注意router-link to的路径问题

(在home.vue中)



 

 

 

你可能感兴趣的:(vue知识学习笔记)