1，应用场景

        A页面跳转到对应的查看器B(可返回A)，B可跳转到C(可返回B)，C可跳转到B(可返回C),循环跳转正确返回对应页面。

2，解决方法

        利用sessionStorage缓存跳转前的路径。每一次进行跳转时进行缓存当前的路径。在进行需要返回时取出最新的路径，并从缓存中进行删除，进行对应的跳转返回。

        缺点(只适合跳转-》返回，不适合页面间既可以跳转又可以进行面包屑等页面切换，会导致存入的缓存路径不正确)。

3，代码演示A->B

  3.1，A页面跳转前存入当前路径

toMy{//跳转到对应的路径let path = '/home/ToHome'//存入当前路径（页面返回取出）let fromPath = '/home/ToMy'// 从sessionStorage中获取已有的路径数组数据，如果没有则创建一个空数组let pathArray = JSON.parse(sessionStorage.getItem('pathArray')) || [];// 将跳转前的路径添加到数组中pathArray.push(fromPath);// 将包含路径信息的数组转换为字符串并存入sessionStoragesessionStorage.setItem('pathArray', JSON.stringify(pathArray));this.$router.push({path,query: { ReportInfo: row,index:1},})
}

 3.2，B返回A取出缓存路径进行返回

back{
let stringPath= JSON.parse(sessionStorage.getItem('pathArray'));
if(stringPath&&stringPath.length>0){//取出对应路径进行跳转let path =stringPath.pop();this.$router.push({path});// 更新缓存最新跳转路径sessionStorage.setItem('pathArray', JSON.stringify(stringPath));                      };
}

4.路由守卫（Route Guards）

用于在导航过程中对路由进行控制和管理。通过路由守卫，您可以在路由导航前、路由导航后、以及路由更新时执行一些逻辑操作，比如权限验证、页面加载状态管理等。

Vue Router提供了三种类型的路由守卫：

1. 全局前置守卫：通过router.beforeEach()注册全局前置守卫，在每次路由跳转之前都会执行该守卫。可以用于进行全局的权限验证、页面加载状态管理等操作。

2. 全局解析守卫：通过router.beforeResolve()注册全局解析守卫，在导航被确认之前（在所有组件内守卫和异步组件被解析之后）执行。常用于确保异步组件完全加载后再进行导航。

3. 全局后置钩子：通过router.afterEach()注册全局后置钩子，在每次路由跳转之后都会执行该钩子。常用于页面切换动画、页面滚动行为等操作。

4. 全局前置守卫来进行权限验证

   import Vue from 'vue';
   import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({routes: [// 路由配置]
   });router.beforeEach((to, from, next) => {// 在每次路由跳转之前执行该守卫const isAuthenticated = checkUserAuthentication(); // 检查用户是否已认证if (to.meta.requiresAuth && !isAuthenticated) {// 如果需要认证且用户未认证，则重定向到登录页面next('/login');} else {next(); // 继续路由跳转}
   });export default router;

   使用router.beforeEach()注册了一个全局前置守卫，用于检查用户是否已认证。如果目标路由需要认证且用户未认证，则重定向到登录页面；否则继续路由跳转。