vue-router添加动态路由及无限刷新白屏和添加不生效问题

最新推荐文章于 2024-05-25 01:06:35 发布
最新推荐文章于 2024-05-25 01:06:35 发布
阅读量8.3k 收藏 38
点赞数 12
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43993065/article/details/114259147
版权

文章目录

添加动态路由

  • router/index.js

在router.js里定义asyncRoutes作为动态路由数组，

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

export const constantRoutes = [
  {
    path: "",
    redirect: '/portal',
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
  },
  {
    path: '/portal',
    component: () => import('@/views/portal/index'),
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () =>
                  import ('@/views/dashboard/index'),
      meta: { title: '资源认证平台', affix: true, icon: 'dashboard' }
    }]
  },

  {
    path: '/user',
    component: Layout,
    redirect: '/user',
    children: [{
      path: 'user',
      name: 'User',
      component: () =>
                  import ('@/views/user/index'),
      meta: { title: '用户管理', affix: true, icon: 'user', }
    }]
  }
  // 404 page must be placed at the end !!!
]

export const asyncRoutes = [
  {
    path: '/application',
    component: Layout,
    redirect: '/application',
    children: [{
      path: 'application',
      name: 'Application',
      component: () =>
                  import ('@/views/application/index'),
      meta: { title: '应用管理', affix: true, icon: 'table', roles: ['system'] }
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router
  • store/modules/permission.js

在store/modules下添加permission.js

// 首先，从index.js中引入已经定义过的2个router数组
import { asyncRoutes, constantRoutes } from '@/router'
 
// 全局变量state，routes和addRoutes数组
const state = {
  routes: [],
  addRoutes: []
}
 
// mutations 是唯一可以更改state的函数，使用SET_ROUTES定义更改方法，SET_ROUTES(state, routes)的入参routes赋值给addRoutes数组，将constantRoutes静态路由数组增加routes；
 
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}
 
// vue中store状态管理，通过actions调用 mutations 中封装的方法来实现对于state更改，
// 这里是vue-element-admin中动态路由的主要判断逻辑发生地方，首先判定用户角色是否包含admin（可能多角色），是则将所有asyncRoutes 加入到constantRoutes，若用户角色没有包含admin，则调用filterAsyncRoutes函数，递归地判定asyncRoutes.roles属性是否有该角色，即是否有权限，将有权限的router赋值accessedRoutes 后加入到constantRoutes；
 
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('system')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
 
//-----------------
// 两个上面使用的方法
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}
 
export function filterAsyncRoutes(routes, roles) {
  const res = []
 
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
 
  return res
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
  • src/permission.js

修改根目录src下的permission.js

if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
       try {
         const roles = await store.dispatch('user/getInfo')
         await store.dispatch('permission/generateRoutes', roles).then(res => {
           router.addRoutes(res)
           next({ ...to, replace: true })
         })
       } catch (error) {
         await store.dispatch('user/resetToken')
         Message.error(error || 'Has Error')
         next(`/login?redirect=${to.path}`)
         NProgress.done()
       }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }

问题一：路由守卫死循环

在这里插入图片描述

如图，按上面配置动态路由后，在进入路由守卫时，不断循环，无法正常转发

其实在路由守卫中，只有next()是放行，其他的诸如：next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行，而是：中断当前导航，执行新的导航

例如现在我有一个守卫，在守卫中我使用next('/logon')，肯定有同学认为是会直接跳转到/logon路由：

beforeEach((to, from, next) => {
  next('/logon')
}

其实他是这么执行的：

beforeEach((to, from, next) => {
  beforeEach(('/logon', from, next) => {
  	 beforeEach(('/logon', from, next) => {
  	 	 beforeEach(('/logon', from, next) => {
  	 	 	beforeEac...  // 一直循环下去...... , 因为我们没有使用 next() 放行
 		}
 	 }
  }
}

next('/logon')不是说直接去/logon路由，而是中断这一次路由守卫的操作，又进入一次路由守卫，就像嵌套一样，一层路由守卫，然后又是一层路由守卫，此时路由守卫进入到第二层时，to.path已经不是/home了，这个时候才执行next()放行操作。
如果守卫中没有正确的放行出口的话，会一直next({ ...to})进入死循环 !!!

因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次beforeEach((to, from, next)中有一个正确的next()方向出口。
因此想实现动态添加路由的操作的话，代码应该是这样的：

const hasToken = getToken()['Authorization']
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if(hasRoles){
        next()
      }else{
        try {
          const roles = await store.dispatch('user/getInfo')
          await store.dispatch('permission/generateRoutes', roles).then(res => {
            router.addRoutes(res)
            next({ ...to, replace: true })
          })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

getInfo({ commit, state }){
    return new Promise((resolve, reject) => {
      const { roles } = JSON.parse(getUser())
      commit("SET_ROLES", roles)
      resolve(roles)
    })
  },

问题二：addRouters()不生效

执行完addRouters()后，我查看了store里的routes，已经有将动态路由添加进去，但是菜单中还是没有显示

查看了/layout/components/Sidebar/index.vue，发现使用的是this. r o u t e r . o p t i o n s . r o u t e s 而 不 是 s t o r e 中 的 ， 所 以 我 们 需 要 在 a d d R o u t e r s ( ) 后 也 修 改 t h i s . router.options.routes而不是store中的，所以我们需要在addRouters()后也修改this. router.options.routes而不是store中的，所以我们需要在addRouters()后也修改this.router.options.routes的值，或者直接修改下面routes()方法，直接使用store中的routes

routes() {
  return this.$router.options.routes
}

修改后的permission.js

const roles = await store.dispatch('user/getInfo')
await store.dispatch('permission/generateRoutes', roles).then(res => {
  router.addRoutes(res)
  router.options.routes = store.getters.routes
  next({ ...to, replace: true })
})

最终版，所有相关文件

  • router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

export const constantRoutes = [
  {
    path: "",
    redirect: '/portal',
  },
  
  {
    path: '/login',
    component: () => import('@/views/login/index'),
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
  },

  {
    path: '/portal',
    component: () => import('@/views/portal/index'),
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () =>
                  import ('@/views/dashboard/index'),
      meta: { title: '资源认证平台', affix: true, icon: 'dashboard' }
    }]
  },

  {
    path: '/user',
    component: Layout,
    redirect: '/user',
    children: [{
      path: 'user',
      name: 'User',
      component: () =>
                  import ('@/views/user/index'),
      meta: { title: '用户管理', affix: true, icon: 'user', }
    }]
  }
  // 404 page must be placed at the end !!!
]

export const asyncRoutes = [
  {
    path: '/application',
    component: Layout,
    redirect: '/application',
    children: [{
      path: 'application',
      name: 'Application',
      component: () =>
                  import ('@/views/application/index'),
      meta: { title: '应用管理', affix: true, icon: 'table', roles: ['system'] }
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router
  • store/modules/permission.js
// 首先，从index.js中引入已经定义过的2个router数组
import { asyncRoutes, constantRoutes } from '@/router'
 
// 全局变量state，routes和addRoutes数组
const state = {
  routes: [],
  addRoutes: []
}
 
// mutations 是唯一可以更改state的函数，使用SET_ROUTES定义更改方法，SET_ROUTES(state, routes)的入参routes赋值给addRoutes数组，将constantRoutes静态路由数组增加routes；
 
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}
 
// vue中store状态管理，通过actions调用 mutations 中封装的方法来实现对于state更改，
// 这里是vue-element-admin中动态路由的主要判断逻辑发生地方，首先判定用户角色是否包含admin（可能多角色），是则将所有asyncRoutes 加入到constantRoutes，若用户角色没有包含admin，则调用filterAsyncRoutes函数，递归地判定asyncRoutes.roles属性是否有该角色，即是否有权限，将有权限的router赋值accessedRoutes 后加入到constantRoutes；
 
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('system')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
 
//-----------------
// 两个上面使用的方法
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}
 
export function filterAsyncRoutes(routes, roles) {
  const res = []
 
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
 
  return res
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
  • src/permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)

  const hasToken = getToken()['Authorization']
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if(hasRoles){
        next()
      }else{
        try {
          const roles = await store.dispatch('user/getInfo')
          await store.dispatch('permission/generateRoutes', roles).then(res => {
            router.addRoutes(res)
            router.options.routes = store.getters.routes
            next({ ...to, replace: true })
          })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
SsM4丶
关注
  • 12
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue实现权限控制路由(vue-router 动态添加路由)
10-16
import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/login', component: login }, // 其他无权限限制的路由... ]; export default new VueRouter({ routes, }); ``` 然后...
解决vue-router 嵌套路由没反应的问题
10-14
在Vue.js应用中，Vue Router是官方推荐的路由管理库，用于处理页面的导航和视图切换。在本文中，我们将深入探讨如何解决Vue Router中嵌套路由无响应的问题，以便更好地理解和应用这一强大功能。 首先，让我们回顾...
Vue Router 实现动态路由（权限）和常见问题及解决方法
m0_66097479的博客
05-11 5291
如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种： 前端将全部路由规定好，登录时根据用户角色权限来动态展示路由； 路由存储在数据库中，前端通过接口获取当前用户对应路由列表并进行渲染； 第一种方式在很多Vue UI Admin上都实现了，可以去读一下他们的源码理解具体的实现思路，这里就不过多展开。第二种方式现在来说也比较常见了，因为近期项目正好用到所以单独讲一下，这里我使用的方案是利用Vue Router的一些特性实现后端主导的动态路由。 使用到的功能特性 Vu
关于vue.js中动态路由addRoutes失效，另一种方案
a983677218的博客
06-12 3459
在我们没用addroutes之前路边中有12个对象，但是在使用之后还是12个，这个问题研究了很久。最后想来想去还是直接从源头触发，我们目的是像路边表中添加东西，那不就是在vueRouter中options的router数组中添加对象吗？官网给的提示很多人没注意，在添加动态路由的时候404这个页面一定要在最后，不然你点了动态路由，因为他是从上到下遍历的，直接给你跳到404了。在成功的像router中添加了2个路由后，在我们的左侧菜单也将测试页面显示了出来（还有个是404页面）
Vue的router.addRoutes不起作用
最新发布
V1040375575的博客
05-25 333
说明：options是传递给vuerouter构造函数的对象，之后没有修改（也就是vue实例化时在router.js中定义的那些路由），所以通过动态添加的路由是不会显示在options.routes中的，Vue就是这么设计的。项目说明：后台项目使用的是vue-admin-template，上面截图的文件目录路径：‘项目根目录/src/layout/components/Sidebar/index.vue’文件中。来渲染的，最终使用了Vuex中的数据来渲染的。最终发现左侧菜单组件中的路由是根据。
vue route动态添加路由
weixin_44043338的博客
01-02 562
【代码】vue route动态添加路由。
Vue-Router(4) 学习之动态路由 addRoute
Raywh的博客
05-15 8958
前端动态路由：前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。addRoute 方法：在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。
当我们打开首页时，加载了哪些组件
qq_45000453的博客
10-14 460
一.咋我在启动项目后可以通过浏览器查看都是先挂载在App.vue主组件上，显示不同的组件如图下图所示: 一般来说人资后台都是两个一级路由，分别是Login登录页和Layout具体内容页，和若干个二级路由和三级路由组成。 <template> <div id="app"> <router-view /> </div> </template> <script> export default { name:.
Vue Router 动态路由
官方推荐
01-30 904
Vue Router 动态路由
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router路由参数刷新消失的问题解决方法
08-30
vue-router路由参数刷新消失的问题解决方法 路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和...
vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
ZHANG_666
05-12 4万+
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取 然后经过数据格式处理 但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由 分析:页面刷新后由于是异步获取的原
记录使用addRoute（不生效）报错‘path’xxxxx的解决方案
qq_36821274的博客
03-02 3547
根据业务需求，写的是一个后台管理系统，需要根据角色来进行菜单展示动态路由 错误： let menulist=[]; for(let i=0;i<res.data.length;i++){ let item=res.data[i]; let children=[]; if(item.subMenuList){ for(let j=0;j<item.su
Vue 实现动态路由
m0_56699208的博客
02-04 790
Vue中实现动态路由主要涉及到两个方面：一是路由的动态添加，二是基于路由的参数变化来动态渲染组件。这通常在使用Vue Router时进行配置和实现。通过上述方法，可以在Vue中实现动态路由的功能，从而根据应用的需要动态地更改路由或根据路由参数变化来更新页面内容。在上面的例子中，userId是一个路由参数，你可以在对应的组件中通过。
基础知识系列（十二）：Vue3的vue-router的进阶使用（路由导航守卫、路由元信息、二级路由、路由滚动行为、路由懒加载、动态添加路由）
A20231015的博客
12-10 287
在views文件夹的Tourist.vue文件中，写。在router文件夹的index.js文件中，写。在router文件夹的index.js文件中，写。在router文件夹的index.js文件中，写。在router文件夹的index.js文件中，写。在router文件夹的index.js文件中，写。在views文件夹的Home.vue文件中，写。在views文件夹的Home.vue文件中，写。在views文件夹的Vip.vue文件中，写。
VueRouter 动态路由
ljy1652872666的博客
07-20 613
VueRoute 官网 https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html#%E5%9C%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%B8%AD%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1
vue实现动态路由菜单！！！
TangMonk的博客
11-28 1598
递归处理后端响应的菜单树，后依次通过addRoute方法往静态父路由，添加动态子路由，添加完使用el-menu渲染并添加router属性实现路由菜单模式。
vue2.0 + router 3. 0 动态添加路由
weixin_46531845的博客
04-13 6528
vue 动态添加路由
vue权限控制路由（vue-router 动态添加路由）
热门推荐
qq_28529373的博客
09-13 7万+
    用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。     思路如下：     一、定义初始化默认路由。 二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。 三、通过匹配，把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次...
vite +vue3.0+ vue-router4.0 动态添加路由失败
05-01
vite作为一种新型构建工具，它的目标是提供快速的开发体验，但与此同时也包含了一些使用限制，其中包括动态路由表的生成。在使用vue3.0和vue-router4.0时，如果想要动态添加路由，需要在路由表中引入需要添加的组件，并且在组件加载前对路由进行监听，以便在组件加载时能够正确地生成路由表，否则动态路由的添加会失败。因此，我们需要在vue-router4.0中使用addRoute或者addRoutes方法来动态添加路由。在使用这些方法时，需要明确路由的路径和要渲染的组件，以及在路由更新时要执行的逻辑，这样才能保证动态路由的生成和更新。此外，在vite中因为是基于ES模块的加载机制，所以需要确保每个动态路由在使用前都必须被加载完毕，否则可能会出现加载错误的情况。因此，在使用动态路由的过程中，需要对应用程序的代码进行优化，保证所有路由的组件都能够正确地被加载并生成路由表，才能保证动态路由的正确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值