Vue 2中Vue Router路由跳转时URL异常追加问题求助

这个问题我之前也碰到过，本质是没搞清楚Vue Router里相对路径和绝对路径的区别导致的！

问题根源 #

你执行的this.$router.push({ path: 'memberships' });里的memberships是相对路径——它会基于当前页面的路由路径去拼接。比如当前在根路径/，跳转后会到/memberships；但之后再用类似path: 'shop'这种相对路径跳转时，就会以当前的/memberships为基础，拼接成/memberships/shop，这就是你看到的异常URL的原因。

两种快速解决方法 #

1. 始终使用绝对路径

所有跳转的path前面加上/，让路由从根路径开始匹配，就不会出现追加问题：

// 正确跳转到memberships列表页（绝对路径）
this.$router.push({ path: '/memberships' });

// 后续跳转shop/deals也用绝对路径
this.$router.push({ path: '/shop' }); // 会正确跳转到http://localhost:8000/shop
this.$router.push({ path: '/deals' }); // 会正确跳转到http://localhost:8000/deals

2. 使用命名路由（更推荐）

给你的路由配置加上name属性，跳转时通过name来指定路由，这样不管当前在哪个路径下，都会精准匹配到对应的路由：

首先修改你的路由配置：

const routes = [
  {
    path: '/memberships',
    name: 'MembershipsList', // 给列表页加名字
    component: MembershipsListComponent
  },
  {
    path: '/memberships/:id',
    name: 'MembershipDetail', // 给详情页加名字
    component: MembershipDetailComponent
  },
  {
    path: '/shop',
    name: 'Shop',
    component: ShopComponent
  },
  {
    path: '/deals',
    name: 'Deals',
    component: DealsComponent
  }
]

然后跳转时用name代替path：

// 跳转到会员列表
this.$router.push({ name: 'MembershipsList' });

// 跳转到shop
this.$router.push({ name: 'Shop' });

// 跳转到会员详情页（带参数）
this.$router.push({ name: 'MembershipDetail', params: { id: 'bronze' } });

总结 #

相对路径适合在嵌套路由里基于父路由跳转，但如果是全局跳转，绝对路径或命名路由会更可靠，能彻底避免这种URL拼接异常的问题。

内容的提问来源于stack exchange，提问作者Bilal Rabbi