Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别

最新推荐文章于 2023-06-29 23:23:19 发布

今汝安

最新推荐文章于 2023-06-29 23:23:19 发布

阅读量8k

点赞数 21

本文链接：https://blog.csdn.net/m0_59128154/article/details/119426919

版权

Vue Router 路由配置路径跳转子路由 webpackChunkName

关键词由CSDN通过智能技术生成

示例代码:

const routes = [
  {
    path: '/layout',
    component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout/Layout.vue'),
    children: [
      {
        path: 'home',
        component: () => import(/* webpackChunkName: "Home" */ '@/views/layout/home/Home.vue'),
        meta: {
          isR: true,
          top: 0
        }
      },
      { path: '/user', component: () => import(/* webpackChunkName: "User" */ '@/views/layout/user/User.vue') }
    ]
  },
]


const router = new VueRouter({
  routes
})

区别:

不带 / （推荐）:
- 如示例代码所示, 当 layout 的子路由 home 在定义 path 路径时没有在路径前书写 / , 那么在 layout 跳转至 home 时, 以$router.push方法为例, 在书写跳转地址时需要与父级路由地址一同书写, 如下 :
```
$router.push('/layout/home')
```
  浏览器地址栏显示: http:xxxxxxxxxx/layout/home ;
带 / :
- 如示例代码, layout 的子路由 user 定义 path 路径时书写了 / , 那么在 layout 跳转至 user 时, 同样以$router.push方法为例, 只需书写 user 自身的 path 定义的路由地址, 如下:
```
$router.push('/user')
```
  浏览器地址栏显示: http:xxxxxxxxxx/user .