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

相关推荐
www_pp_7 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue26 分钟前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码41 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js