vue-router 父路由为跟路由定位到某个子路由

最新推荐文章于 2022-08-24 14:25:12 发布

Nick_5

最新推荐文章于 2022-08-24 14:25:12 发布

阅读量1.4k

点赞数 1

分类专栏： vue-router

本文链接：https://blog.csdn.net/weixin_41877243/article/details/111633403

版权

vue js

vue-router 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种方法：重定向。

{
      path: '/',
      name: 'home',
      redirect:'home',
      component: () => import(/* webpackChunkName: "index" */ '../views/layout.vue'),
      children:[
        {
          path: 'home',
          name: 'home',
          meta:{
            title:'首页',
            keepAlive:true
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/home/index')
        },
        {
          path: 'tool',
          name: 'tool',
          component: () => import(/* webpackChunkName: "index" */ '../views/tool/index'),
          meta:{
            title:'工具'
          }
        },
        {
          path: 'report',
          name: 'report',
          meta:{
            title:'报告'
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/report/index')
        },
        {
          path: 'my',
          name: 'my',
          meta:{
            title:'我的收藏'
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/my/index')
        },
      ]
  },

第二种方法：通过父路由的path和子路由的path相同来绑定。

{
      path: '/',
      name: 'home',
      component: () => import(/* webpackChunkName: "index" */ '../views/layout.vue'),
      children:[
        {
          path: '/',
          name: 'home',
          meta:{
            title:'首页',
            keepAlive:true
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/home/index')
        },
        {
          path: 'tool',
          name: 'tool',
          component: () => import(/* webpackChunkName: "index" */ '../views/tool/index'),
          meta:{
            title:'工具'
          }
        },
        {
          path: 'report',
          name: 'report',
          meta:{
            title:'报告'
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/report/index')
        },
        {
          path: 'my',
          name: 'my',
          meta:{
            title:'我的收藏'
          },
          component: () => import(/* webpackChunkName: "index" */ '../views/my/index')
        },
      ]
  },