[JavaScript知识库]Vue Router 嵌套路由中 子路由path路径带 ‘/‘ 与不带的区别

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

示例代码:

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 .