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

最新推荐文章于 2024-12-01 17:04:13 发布

原创最新推荐文章于 2024-12-01 17:04:13 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

前端学习专栏收录该内容

107 篇文章

订阅专栏

本文介绍了Vue.js中如何正确配置路由来实现嵌套路由的功能。通过调整子路由的路径配置，可以使URL更符合预期，即在访问子组件时，URL会显示父级路由的信息。文章对比了两种不同的配置方式及其对URL的影响。

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')