vue 动态添加的路由页面刷新时失效的原因及解决方案

2024-07-29 09:42:44

问题描述

昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现了404的情况。

场景

后台管理系统的权限控制是通过在前端页面定义权限code，把code给后台同学保存配置到表中，之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配，code相等的页面就是有权限的页面，再通过router.addRoute()动态添加到路由中，有权限的路由才可以被访问，否则会提示无权限。

固定路由一开始就会放在new Router中，比如登录页面login

接口返回

前端菜单定义

vuex中的方法

出现的问题

登录后，通过调用vuex中的方法，完成获取权限code，动态筛选权限路由页面操作，然后通过router.addRoute()将有权限菜单添加到路由中，进入动态添加的路由页面，刷新页面出现404

原因分析

页面刷新时，路由重新初始化，动态添加的路由此时已不存在，只有一些固定路由（比如登录页面）还在，所以出现了404的情况

解决方案

VUEX store中存储的数据会在页面刷新时清空。
在路由的全局导航router.beforeEach处做个判断，根据VUEX中存放的list是否有值来判断页面是否是刷新，如果不为0，则是第一次登陆，登录后会走匹配路由的方法，不会有问题;如果list.length为0，就为刷新页面，需要重新执行路由匹配，重新添加动态路由即可。

实现代码 route/index.js的导航守卫中添加逻辑判断

———router.js————-

const constantRoutes = [
 {
  path: '/',
  redirect: '/login'
 },
 {
  path: '/login',
  name: 'login',
  meta: {
   auth: false
  },
  component: () => import('@/views/login')
 },
 {
  path: '/layout',
  name: 'layout',
  meta: {
   auth: true
  },
  component: () => import('@/views/layout/index'),
  children: [
   {
    path: '/index',
    name: 'index',
    component: () => import('@/views/home')
   }
  ]
 },
 {
  path: '*',
  component: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 new VueRouter({
  routes: constantRoutes
 })
export function resetRouter() {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // reset router
}
const router = createRouter()

//页面刷新后重新设置权限页面动态路由，防止出现动态路由404问题
const reSetPermissionList = to => {
 return new Promise((resolve, reject) => {
  if (to.path !== '/login' && store.state.permission.permissionList.length === 0) {
   store
    .dispatch('permission/getPermissionList')
    .then(() => {
     resolve('permCode')
    })
    .catch(error => {
     resolve('permCode')
    })
  } else {
   resolve()
  }
 })
}
router.beforeEach((to, from, next) => {

 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)) {//是否已经登录 否 去登陆页面
  next({
   path: '/login',
   query: {
    redirect: to.fullPath
   }
  })
 } else { //已登录用户进入页面
  if (to.path === '/login') {
   next({ path: '/index' })
  } else {
    reSetPermissionList(to).then(data => {
     data === 'permCode' ? next({ path: to.path, query: to.query }) : next()
    })
  }
 }

})

总结

主要通过在全局导航处判断VUEX中的数据是否存在，判断页面是否刷新，是的话重新走一遍权限路由匹配的方法。

以上就是vue动态添加的路由页面刷新时失效的原因及解决方案的详细内容，更多关于vue 路由页面刷新的资料请关注我们其它相关文章！

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in
解决vue 路由变化页面数据不刷新的问题

每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

废话不说,上代码! <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]"> <a-menu-item :key="'/home'"> <router-link to="home"> <a-icon type="user" /> <span>nav 1&l
Vue实现远程获取路由与页面刷新导致404错误的解决

一.背景先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将
vue 刷新之后嵌套路由不变重新渲染页面的方法

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面
vue在App.vue文件中监听路由变化刷新页面操作

在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.
vue通过路由实现页面刷新的方法

vue 开发微信商城项目, 需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法 beforeDestroy() { this.$root.Bus.$off('judge') this.$root.Bus.$off('refreshDetail') this.$root.Bus.$off('cle
vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //
vue实现路由不变的情况下，刷新页面操作示例

本文实例讲述了vue实现路由不变的情况下,刷新页面操作.分享给大家供大家参考,具体如下: 背景1:在vue写的后台管理项目中,经常会有增.删.改.查的操作,这些操作只是跟用接口跟后台交互下既然用接口交互,那肯定就是axios的异步请求,那么就是说后台数据发生了改变,但是前台的数据并没有实时的更新(每次操作完后台把列表数据重新返给你例外,但是这样的话每次交互的数据量就偏大了) 背景2:在使用动态路由配置 /detail/:id 这样的情况下,由于 router-view 是复用的,单纯的改变 i
vue 动态添加的路由页面刷新时失效的原因及解决方案

目录问题描述场景接口返回前端菜单定义 vuex中的方法出现的问题原因分析解决方案实现代码 route/index.js的导航守卫中添加逻辑判断总结问题描述昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时,遇到一个问题:动态添加的路由页面,在页面刷新时出现了404的情况. 场景后台管理系统的权限控制是通过在前端页面定义权限code, 把code给后台同学保存配置到表中,之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配,code相等的页
vue单页应用在页面刷新时保留状态数据的方法

在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你一.问题现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的
vue动态添加store、路由和国际化配置方式

目录 vue动态添加store,路由和国际化 vue动态添加store vue动态添加路由 vue动态加载国际化前端项目中用vue-i18n实现国际化在项目中安装国际化包的依赖配置文件异步方式引入,一次只加载一种国际化包非异步步方式,每次加载所有的包使用切语言 vue动态添加store,路由和国际化 vue动态添加store 想写组件库?用这个吧 … // store module标准格式 import demo from '@/store/modules/demo' $store
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去
Vue路由传参页面刷新后参数丢失原因和解决办法

目录 vue路由传参方法原因分析: 解决方案: 总结 vue路由传参方法在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test 页面就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数
Jquery动态添加及删除页面节点元素示例代码

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo
javascript实现页面刷新时自动清空表单并选中的方法

本文实例讲述了javascript实现页面刷新时自动清空表单并选中的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); // assuming the f
vue 动态添加class,三个以上的条件做判断方式

如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 如果 status为其他,样式为greenRoom2 :class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}" 补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还
vue 动态添加el-input的实现逻辑

目录一.效果图二.实现逻辑一.效果图二.实现逻辑将需要动态添加的表单项项的绑定值存为一个数组以循环的方式展示form表单点击`+`按钮触发事件,向数组中新加一个item 点击`-`按钮触发事件,根据循环的得到的index来删除数组中相对应位置的item三.代码实现 <template> <div> <el-button @click="isDilogShow = true" plain>动态添加input</el-button&g
Vue 动态添加路由及生成菜单的方法示例

写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.