vue3路由守卫后退

在Vue3中，可以使用导航守卫来控制路由的后退行为。其中，常用的导航守卫有`beforeRouteLeave`和`beforeRouteUpdate`。

`beforeRouteLeave`是在路由离开组件之前触发的守卫。可以用于确认是否允许离开当前页面，或者执行一些清理操作。例如，如果用户在表单页面进行编辑，但尚未保存，可以在该守卫中提示用户保存数据。如果用户选择离开，路由将继续执行后退操作。

`beforeRouteUpdate`是在组件重新渲染前触发的守卫。当同一个路由被复用时（例如从A路由跳转到B路由，再从B路由返回A路由），该守卫可以用来响应路由参数或查询参数的变化，执行相应的更新操作。

在具体的代码实现中，可以使用以下方式来实现路由守卫后退：

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // 如果要跳转到登录页，直接放行
    next();
  } else {
    // 获取token
    const tokenStr = window.sessionStorage.getItem('token');    if (!tokenStr) {
      // 如果没有登录状态，强制跳转到登录页
      next('/login');
    } else {
      // 其他情况放行
      next();
    }
  }
});

在上述代码中，我们使用`router.beforeEach`来注册全局的导航守卫。在回调函数中，我们首先判断要跳转的路径是否是登录页，如果是，则直接放行。否则，我们从`window.sessionStorage`中获取token，如果token不存在，则强制跳转到登录页，否则放行。

这样，在进行路由后退时，导航守卫会对路由进行拦截，根据条件判断是否允许后退到目标页面。