router.go()妙用

1 背景

最近在做动态路由相关的功能实现，涉及到一些页面跳转的功能，我们都知道返回上一页用的是 router.go(-1)，它的意思就是说返回上一个路由地址。

但是，现在有这么一个场景（技术栈：vue3+"vue-router": "^4.1.6"），比如原来我是在路由地址 A，然后我点击了路由 B，我会在前置路由钩子里面先检测当前访问的路由地址 B，如果 B 没有权限访问那么就会默认跳转地址 C（这个是 404 页面），在地址 C 的 404 页面里面有个返回上一页按钮。

我给返回上一页按钮写的事件如下：

<script setup lang="ts">

import { useRouter } from 'vue-router'

import { House } from '@element-plus/icons-vue'

const router = useRouter()

const goIndex = () => {

router.go(-1)

}

</script>

<template>

<div class="container">

<img src="../assets/picture/common/404.png" alt="" class="img" />

<div class="text">当前页面不存在</div>

<el-link type="primary" :icon="House" @click="goIndex">回到上一页</el-link>

</div>

</template>

可是呀，事实情况总是事与愿违，但我执行router.go(-1) 这句话的时候并不能直接返回我原来的路由地址（A 地址），而是返回了那个没有权限访问的 B 地址（尽管页面没有真正跳转到 B 地址，但是路由地址里面会显示），而且再点击一下才会真正返回到想要的上一页路由地址 A 页面。

显然，这不是我想要的，那咋办呢，请看我下面的实现：

2 突发奇想的实现

我想既然跳转一次不行，那我跳转 2 次呢，实现如下：

const goIndex = () => {

router.go(-1)

router.go(-1)

}

哈哈，我运行了上面这段代码，显然不行，于是乎，我又改成了下面这样，

const goIndex = () => {

router.go(-2)

}

果然，将-1 改成了-2，就可以直接跳转到前两页的位置，竟然就是这么简单！

3 小结

果然还是得实践。