vue路由之间实现相对路径跳转

今天写东西遇到多层路由，路由之间跳转时需要相对路径，因此查了一下官网用到了append属性和router.resolve方法，因此列出具体的使用方法。

append 属性

类型: boolean
默认值: false
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /eth/login导航到一个相对路径 /eth/block，如果没有配置 append，则路径为 /block，如果配了，则为 /eth/block

<router-link to="block/" append>从login跳到同级的block路由</router-link>

<!-- 如果现在路由为block,想跳到eth/: -->
<router-link to="../" append>回到上级eth路由</router-link>

router.resolve方法

router.resolve(location, current?, append?)
返回值：路由对象

• 解析目标位置 (格式和 <router-link> 的 to prop 一样)。
• current 是当前默认的路由 (通常你不需要改变它)
• append 允许你在 current 路由上附加路径 (如同 router-link)

export default {
  mounted() {
    //获取即将跳转的路由对象
    let routeObj = this.$router.resolve({
        path: '../'
      },
      this.$route,
      "append"
    );

    //打印查看路由对象
    console.log(routeObj);

    //路由跳转
    this.$router.push({
      path: routeObj.route.path
    });
  }
}

我的个人博客,有空来坐坐