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

1,应用场景

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

2,解决方法

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

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

3,代码演示A->B

3.1,A页面跳转前存入当前路径
javascript 复制代码
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取出缓存路径进行返回
javascript 复制代码
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()注册全局后置钩子,在每次路由跳转之后都会执行该钩子。常用于页面切换动画、页面滚动行为等操作。

全局前置守卫来进行权限验证
javascript 复制代码
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()注册了一个全局前置守卫,用于检查用户是否已认证。如果目标路由需要认证且用户未认证,则重定向到登录页面;否则继续路由跳转。

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端