[Bug] Vue Router 的 $router.push() 的坑点

我正在参加「掘金·启航计划」

一、问题描述

1.路由结构描述

「新增文章」和「编辑文章」实际上是在一个Vue组件中完成的，根据传入id与否判断进入哪个操作。该Vue 组件的Vue Route中的相关位置如下：

const routes = [
  ...
  {
    path: "/admin",
    name: "admin",
    component: Admin,
    
    children: [
      ...
      {
        path: "addart",      //添加文章
        component: AddArt,
      },
      {
        path: "addart/:id", //编辑文章
        component: AddArt,
        props: true,
      },
      {
        path: "artlist", //文章列表
        component: Artlist,
      },
      ...
    ],
  },
];

2.Bug 描述：

新增文章时发布，能够正常跳回列表页：

url 变化：
http://localhost:8080/#/admin/addart
->
http://localhost:8080/#/admin/artlist

但编辑文章后发布，跳转失效，url跳转错误：

url 变化：
http://localhost:8080/#/admin/addart
->
http://localhost:8080/#/admin/addart/artlist

二、问题分析

Vue中的this.$toute.push()的 url 参数，如果首字符是/，将定位到绝对路径，否则将定位到相对路径。
以本项目为例，在「文章列表」中点击编辑按钮,如果编辑按钮绑定函数传入了不同的参数：

$router.push() 传参	url 结果
初始 url	http://localhost:8080/#/admin/artlist
push(`/admin/addart/${data.ID}`)	http://localhost:8080/#/admin/addart/2 绝对路径，将/#后的/admin/artlist全部替换
push(`admin/addart/${data.ID}`) 仅去掉了首位的 '/'	http://localhost:8080/#/admin/admin/addart/2 相对路径,只替换url的最后一个分项artlist

三、解决方案

将原来的相对路径的写法改为绝对路径即可：

this.$router.push("artlist");
->
this.$router.push("/admin/artlist"); //加单斜杠表示要求为绝对路径

四、总结和展望

知识点：

• Vue Router 的相对路径和绝对路径。

• Vue Router 的设计目标是实现各组件之间的地址跳转，它是看不到url的前半部分：前端服务的端口号http://localhost:8080/#的。
  它只负责url的后面部分。