vue子路由路径写/和不写/的差别

vue子路由路径写/和不写/的差别

路由的配置

• 子路由写/的时候代表是绝对路径 跳转的时候直接在跟路径下跟上子路由
• 不写/的时候 会进行拼接 在原有路径上跟上新的path路径
• 如果父路由是/ 的时候 子路由写不写/都可以

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/02.form表单组件.vue')
    },
    {
      path: '/abc',
      component: () => import('@/layout.vue'),
      children: [
        {
          path: '/tree', 
          //子路由写了/代表绝对路径 跳转的时候 地址是这个http://localhost:8080/#/tree
          component: () => import('@/03.tree树形组件.vue')
        },
        {
          path: 'table', 
          //子路由没有写/ 代表的拼接的路径 跳转的时候地址是     http://localhost:8080/#/abc/table
          component: () => import('@/00.table表格.vue')
        }
      ]
    }
  ]
})

export default router
```