vue-router中的子路由带'/'和不带'/'的区别详解

1. 不带 '/'

子路由如果不带 / ,是以相对路径进行访问的

先上代码看看

    {
      path: '/dashboard',
      component: Layout,
      children: [{
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }]}

例如嵌套路由中的父级路由路径是 path:'/dashboard',子路由的路径是path:'index',那么进行访问的时候,路由地址会拼接上父级路由的路径,它长这样:http://localhost:8080/#/dashboard/index

2. 带 '/'

默认以绝对路径进行访问

 {
        path: '/dashboard',
        component: Layout,
        children: [{
          path: '/index',
          name: 'Dashboard',
          component: () => import('@/views/dashboard/index'),
          meta: { title: '首页', icon: 'dashboard' }
        }]}

如果是子路由前面加/ ,加上/就不会拼接上父级路由的path路径,地址则为http://localhost:8080/#/index