Vue 路由器后退按钮阻止导航到上一个域

Question

这是我的情况，我有一个使用 vue-router 的 Vue 3 应用程序。在我的应用程序的某些页面上，有一个后退按钮。如果用户直接导航到后退按钮之一页面（例如

/users/123sha256/

）并单击后退按钮，我之前已将它们发送到

router.go(-1)

。但是，如果用户到达此页面，并且他们之前的域名是

https://www.google.com

，并且他们单击后退按钮，他们将从我的 Vue 应用程序中弹出。

我在 GitHub 上看到了这个包https://github.com/MaximVanhove/vue-router-back-button并且正在考虑做这样的事情

const backClick = () => {
  if (this.client || !this.$routerHistory || !this.$routerHistory.hasPrevious()) {
    // probably ssr, or hasn't navigated yet.
    router.push({name: 'home'})
  }

  // 
  // if router.go(-1) is another domain STOP, then Go Home
  //
  
  // otherwise just go back normally
  router.go(-1)
}

这看起来可行吗？我并不是 100% 知道代码会是什么样子，但这就是我到目前为止所拥有的基础知识。

我有一些问题，以及一些我非常感谢的建议/反馈：

• 那个包有必要吗？或者我可以使用

  vue-router

  来执行相同的功能吗？
• 阻止用户退出到以前的域是最佳实践吗？

谢谢！

Answer 1

我认为你可以尝试在不同情况下测量

history.length

。并尝试找到用户从不同域和 vue-router 导航到达页面的情况模式。

当我处理此类导航时，我曾经创建可组合函数来控制不同页面的后退导航。

考虑这个例子：

const backNavigationFnRef = ref(defaultBackNavigationFn)

export const useNavigation = () => {
  const router = useRouter()
  const defaultBackNavigationFn = () => {
      router.go(-1)
  }
  const setBackNavigationFn = (fn) => {
    backNavigationFnRef.value = fn
  }
  const resetNavigationFn = () => {
    setBackNavigationFn(defaultBackNavigationFn)
  }

  return {
   backNavigationFnRef,
   resetNavigationFn,
   setBackNavigationFn
  }
}

现在在大多数情况下，后退按钮只会使用

defaultBackNavigationFn

，如果您想处理特定页面以始终导航回某个页面，请使用：

_id.vue

<script setup>
 import {useNavigation} from '...'
 const {setBackNavigationFn} = useNavigation()

 setBackNavigationFn(() => {
   // here you can write custom back navigation logic
 })
</script>

在

Layout.vue

...
const {backNavigationFnRef} = useNavigation()
...
<Header @onBackBtnClick="() => backNavigationFnRef.value()" />