学习笔记——vue-router显示父路由地址

vue-router使用嵌套路由时，访问子路由时，期望当前的地址是：/副路由/子路由。

---

 以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。

 

1.当前状态

const routes = [
 {
    path: "/admin",
    name: "admin",
    component: Admin,
    children: [
      {
        path: "/account",
        name: "account",
        component: () => import("../views/admin/component/account.vue"),
      },
    ],
  },
]

显示account组件时，此时地址栏路径为：http://localhost:8080/#/account

访问（跳转）account组件时，this.$router.push('/account')

2. 目标状态

const routes = [
 {
    path: "/admin",
    name: "admin",
    component: Admin,
    children: [
      {
        path: "account",    // 没有"/"
        name: "account",
        component: () => import("../views/admin/component/account.vue"),
      },
    ],
  },
]

显示account组件时，此时地址栏路径为：http://localhost:8080/#/admin/account

访问（跳转）account组件时，this.$router.push('/admin/account')