项目经理要求不能回退到项目以外的路由 , 简单解决 ！

不知道小伙伴们有遇到过项目经理哪些奇奇怪怪的需求呢 ?

• 曾经在项目中遇到过这样一个需求 : 点击按钮回退时不能回退到项目以外的路由 ;
• 例如我们的用户正在访问我们的页面时 , 突然有访问某个有趣的网站的冲动 , 在浏览器输入了一串祖传网址 , 一番欣赏后通过浏览器搜索栏回到我们的应用中 , 又点击了我们应用中的回退按钮 , 要求不能回退到用户刚才访问的项目外地址 。

router编程式导航

首先先回顾一下router的两个回退方法(Vue2用法) :

• this.$router.back() --回退
• this.$router.go(-1) --前进或后退 , 值为-1时后退

// Vue3用法
// 1. 引入 useRouter 方法
import { useRouter , useRoute } from 'vue-router'
// 2. 实例化router
const router = useRouter()
// 3. 使用方法进行回退
router.back()

history全局对象

我们怎样知道刚才访问的页面是否为项目中配置的路由呢 ?

☆history对象 !!

• history对象是浏览器提供的一个全局对象，它包含了浏览器的浏览历史记录
• history.state : history提供了state属性 , 返回当前历史状态对象

我们在点击返回按钮时可以在控制台查看一下history.state 属性

当我们使用项目外的网站跳转至项目路由再进行回退 :

我们可以看到state中有一个back属性 , 当外部网站跳转回来时history.state.back值为null

那么项目内部相互跳转再进行回退是什么效果呢 ？

我们可以看到state中的back值为/login , 那么我们就可以用小back来做判断了

// 回退按钮
    <button @click="onClickBack">返回</button>
<templete>
  
</templete>
// 点击返回按钮事件函数
        const onClickBack = () => {
                  //1. console.log(history) 可以试打印一下history对象
                  if ( history.state?.back ) {
                  //2. 如果history.state?.back不为null , 返回上一个页面
                         router.back()
                  } else {
                  //3. 否则返回主页面
                         router.push('/')
                  }
               }

拓展: 可选链

• 上面代码中我们用到了history.state?.back, 上文我们有提到history.state?.back的值有可能为null , 所以会发生找不到back属性的情况 ;
• 我们可以使用ES2021的可选链, 当然也可以使用条件判断或三元运算符等方法 , 相较而言可选链更加便捷一些 ;
• ES2021（也称为ES12）是JavaScript的最新版本，于2021年6月发布。

以上是我解决此问题的方案 , 小伙伴们有什么更好的方案可以一起探讨一下下~