vue router 跳转到一个新路由时，之前的路由残留

Question

我项目的vue-router routes数组配置：

然后我在home.vue中放了<router-view/>标签做子路由分发

---

我的初始路由：
http://localhost:8081/home/dataAnalysis/goods

---

我的路由跳转方法：

private naviPage(targetPath) {
    // 切换路由
    this.$router.push(
       'home' + targetPath, 
    );
  }

---

问题描述

当我使用上述方法，想要跳转到home/user这个路由时，却跳到了http://localhost:8081/home/dataAnalysis/home/user

这是为什么？

已采纳，补充一下

配置嵌套路由的路由规则（routes数组）实际上有两种选择：

1. 子路由path前不加“/”，这样URL也是嵌套的
如上图，访问 user/foo/profile 是可以的

2. 子路由path前加“/”，这样URL不是嵌套的

  {
    path: '/user/:id',
    name: 'user',
    component: () => import('../views/User.vue'),
    children: [
      {
        path: '/vip',
        component: () => import('../views/Vip.vue'),
      },
    ],
  },

实际上能够匹配到的路由是 foo/profile
等同于

  {
    path: '/user/:id',
    name: 'user',
    component: () => import('../views/User.vue'),
  },
 {
    path: '/vip',
    component: () => import('../views/Vip.vue'),
 },

Answer 1

this.$router.push(
       '/home' + targetPath, 
    );

这样即可。

router Push 尽量使用文档中的这种带 Path 或者 name 的方式

如果直接使用字符串，会转为 URL 的默认拼接规则，如果home前面不带/，就变成了相对当前路径进行的跳转。