首页 > 其他分享 >使用vue-router添加动态路由时遇到的坑

使用vue-router添加动态路由时遇到的坑

时间:2023-10-09 15:11:05浏览次数:35  
标签:vue 404 添加 addRoute router login 路由

在开发后台管理的时候,用户登录时需要根据权限来分配路由,这时候可以在路由守卫里通过router.addRoute()方法动态添加路由。

import router from './router'
import store from './store'
import storage from '@/utils/storage'
import { asyncRoute } from "@/router/routers";



router.beforeEach(async (to, from, next) => {
  // 检查是否存在有效的 token,如果存在,表示用户已经进行了身份验证,允许放行
  if (storage.local.get('token')) {
    /* 有 token 就放行*/
    if (to.path === '/login') {
      // 如果目标路径是 /login,且用户已经登录,则不需要再次访问 /login 页面,直接跳转到 /home 页面,放行
      next('/home')
    } else {
      // 检查是否已经获取权限列表
      if (!store.state.user.userInfo.id) {
        let user_id = storage.local.get('user_id')
        await store.dispatch('user/getUserInfo', user_id)
        asyncRoute.forEach(route => {
          console.log(route);
          router.addRoute(route); // 使用 addRoute() 方法添加路由
        });
        next({ ...to, replace: true }); // 使用 `replace: true` 防止导航冲突
      } else {
        next()
      }
    }
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  }
});


router.afterEach(() => {
})

这里遇到了两个坑

报错1:Error: Redirected when going from "/login" to "/home" via a navigation guard.

原因:vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误,但并不影响程序功能,可以在路由文件里面添加以下代码解决

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
}

问题2:我的代码里面路由分成两部分,一个是常量路由,另一个是动态路由,在我们使用router.addRoute()添加动态路由时,常量路由是已经加载好了的,如果常量路由里面有404路由,那么会导致我们跳转路由的时候跑到404路由去

原因:vue-router查找路由时,是按顺序去查找,如果你访问的路由在404路由之后,那么他就会再找到404路由时给你跳转,解决方法就是把404路由,在所有的路由加载好之后再添加进去

//任意路由
export const anyRoute = [{
    //404
    path: '/404',
    component: () => import('@/view/404/index.vue'),
    name: 'NotFound',
    meta: {
        title: 'NotFound',
        hidden: true,
        icon: 'el-icon-loading',
    },
}, {

    //任意路由
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
    meta: {
        title: '任意路由',
        hidden: true,
        icon: 'DataLine',
    },
}]


// 然后再添加动态路由的方法里,把它放再数组的末尾
 let addRoutes = [...asyncRoute, ...anyRoute]
 addRoutes.forEach(route => {
     router.addRoute(route); // 使用 addRoute() 方法添加路由
 });

 


 

标签:vue,404,添加,addRoute,router,login,路由
From: https://www.cnblogs.com/sen-hf/p/17751789.html

相关文章

  • vue中的循环遍历对象、数组和字符串
    vue循环遍历对象、数组和字符串1.循环遍历对象1.1vue在html里面循环遍历对象v-for="(val,key,i)indimItemMap":key="key" val-每一项key-key值i-第几个<el-table-columnprop="score"label="评分":show-overflow-tooltip="true"ali......
  • Linux中使用虚拟路由器进行不同命名空间之间的通信测试
    一个学习研究的案例ipnetnsaddns1#创建命名空间ns1ipnetnsaddns2#创建命名空间ns2创建虚拟路由器设备ipnetnsaddrouter#创建虚拟路由器命名空间iplinkaddveth1typevethpeernameveth1-router......
  • 22-Vue组件化编程
    使用传统的方式编写应用传统的方式,一般离不开前端的三大件(HTML、CSS、JS)HTML:HTML是超文本标记语言(HyperTextMarkupLanguage)是用来描述网页的一种语言,负责网页的架构CSS:CSS是一种层叠样式表(级联样式表、样式表),是⼀种标记语⾔,负责网页的样式,美化JavaScript(JS):JS是运行在客户......
  • Vue学习笔记(七):绑定css样式
      1绑定class样式¶vue为HTML绑定css中的class样式是通过v-bind实现的。  1.1绑定单个class¶把需要绑定的样式class名赋值给一遍变量,然后通过变量v-bind绑定class属性,绑定后的class并不会覆盖原来的class属性,而是与原来的class进行叠加。如下所示,d......
  • vue项目使用lodash节流防抖函数问题与解决
    背景在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。防抖函数_.debounce(func,[wait=0],[options=])创建一个debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。参数func (Function):要防抖......
  • vue $refs 获取的结果有时候是数组
    在工作的时候要从接口读取数据,生成一个动态的表单首先做的就是绑定ref然后使用const{proxy}=getCurrentInstance();来读取ref,看了半天数据怎么不对,控制台打印后,发现是一个数组后来观察到只要是使用v-for生成的获取ref时,即使没有重复,结果也是数组,可能是作者在v-for中为了......
  • HCIA-路由基础
    前言路由技术是Internet得以持续运转的关键所在;企业网络的拓扑结构一般会比较复杂,不同的部门,或者总部和分支可能处在不同的网络中,此时就需要使用路由器来连接不同的网络,实现网络之间的数据转发。关键术语路由(Routing)从源头到目标的路径;不同网络间的转发过程就像火车一样......
  • App.vue 的组成部分
    组件化:页面可拆分成一个个组件,每个组件有着独立的结构、样式、行为组件分类:普通组件、根组件根组件:整个应用最上层的组件,包裹所有普通小组件一个根组件 App.vue,包含三个部分 App.vue文件(单文件组件)的三个组成部分:结构、样式、行为结构通过template标签提供,行为通过scr......
  • Vue工程中 main.js 的作用、npm run serve的执行流程
    1.内容:importVuefrom'vue'   //导入Vue核心包importAppfrom'./App.vue'  //导入App.vue根组件Vue.config.productionTip=false  //提示当前处于什么环境(生产环境/开发环境),fasle是什么提示都没有,改为true才提示,但通常写falsenewVue({   ......
  • Vue项目的使用
    解析Vue项目//1为什么浏览器中访问某个地址,会显示某个页面组件 -根组件:App.Vue必须是:<template><divid="app"><router-view></router-view></div></template> -配置路由: //先导入 importy......