js-vue页面路由跳转（存入缓存）-多个复杂循环跳转返回

哟哟耶耶

已于 2024-06-11 17:11:12 修改

阅读量665

点赞数 5

分类专栏： js 文章标签：前端 javascript 前端框架

于 2024-05-10 11:12:24 首次发布

本文链接：https://blog.csdn.net/2301_76671906/article/details/138656161

版权

js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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);
 // 将包含路径信息的数组转换为字符串并存入sessionStorage
 sessionStorage.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提供了三种类型的路由守卫：

全局前置守卫：通过router.beforeEach()注册全局前置守卫，在每次路由跳转之前都会执行该守卫。可以用于进行全局的权限验证、页面加载状态管理等操作。
全局解析守卫：通过router.beforeResolve()注册全局解析守卫，在导航被确认之前（在所有组件内守卫和异步组件被解析之后）执行。常用于确保异步组件完全加载后再进行导航。
全局后置钩子：通过router.afterEach()注册全局后置钩子，在每次路由跳转之后都会执行该钩子。常用于页面切换动画、页面滚动行为等操作。

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

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