首页 前端知识 Vue实现动态路由

Vue实现动态路由

2024-04-13 09:04:25 前端知识 前端哥 746 922 我要收藏

目录

前言

一、项目介绍

1.开发环境

2.功能

3.项目运行截图  

二、实现

1.动态路由如何实现

2.项目目录介绍

3.核心代码

4.坑和知识点

小结


前言

最近在学权限相关的管理项目,前端用到了动态路由,就是根据用户角色显示不同的菜单,动态添加路由。说着好像很简单,但看了很多教程,也跟着教程写了很多代码,但最后都跑不通(很多原因,比如:版本问题,教程没有全部代码,只有核心代码片段等)。😭😭😭所以,我只能狠下心,写下这篇博客,方便自己总结,也为了避免大家踩坑。

一、项目介绍

项目下载

gitee:https://gitee.com/wusupweilgy/springboot-vue.git(点个star呀😎)

1.开发环境

前端:vue2+element-ui组件

2.功能

根据用户的账号密码,生成不同的菜单,动态添加路由

3.项目运行截图  

 

二、实现

1.动态路由如何实现

流程:

  1. 登录的时候,根据登录用户返回此角色可以访问的页面的路由和token
  2. 前端将路由存储到sessionStorage和vuex中(因为vuex存储的数据一刷就没了,所以需要配合sessionStorage)
  3. 在路由前置守卫处动态添加拿到的路由,对页面进行渲染。

2.项目目录介绍

  •  assets:存放图片和样式
  • router:路由配置
    • dynamicRoutes.js:动态路由模板
    • index.js:静态路由
    • permission.js:路由前置守卫
  • store:vuex存储全局的状态变量
  • util:工具类
    • index.js:动态添加路由工具类
    • request.js:axios请求工具类
  • views:存放页面

3.核心代码

1)/views/Login.vue:登录(onSubmit方法)成功时,根据用户名密码区分角色,根据角色将不同路由和token写入vuex,dynamicRoutes.js中有两个路由模板,分别是user和admin,然后调用generateRoutes()方法向vue-router中动态添加路由

import {admin,user} from '@/router/dynamicRoutes'
...

onSubmit(formName) {
    //为表单绑定验证功能
    this.$refs [formName].validate((valid) => {
        if (valid) {
            if(this.form.username==="user"&&this.form.password==="user"){
                store.commit('SET_MENULIST', user);
                store.commit('SET_TOKEN', 'user');
            }else if(this.form.username==="admin"&&this.form.password==="admin"){
                store.commit('SET_MENULIST', admin);
                store.commit('SET_TOKEN', 'admin');
            }else{
                this.$message.error("登录失败")
                return
            }
            this.$message.success("登录成功")
            generateRoutes()
            this.$router.replace('/')

        } else {
            this.dialogVisible = true;
            return false;
        }
    });
},

2)/store/index.js:vuex状态管理(配合sessionStorage)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token:'',
    menuList:[],
    isLoadRouters:false
  },
  getters: {
    GET_TOKEN:state => {
      state.token = sessionStorage.getItem("token")
      return state.token
    },
    GET_MENULIST:state => {
      state.menuList = JSON.parse(sessionStorage.getItem("menuList")||'[]')
      return state.menuList
    },
    GET_ISLOADROUTERS:state=>{
      return state.isLoadRouters
    }
  },
  mutations: {
    SET_TOKEN:(state,token)=>{
      state.token = token
      sessionStorage.setItem("token",token);
    },
    SET_MENULIST:(state,menuList)=>{
      state.menuList = menuList
      sessionStorage.setItem("menuList",JSON.stringify(menuList));
    },
    SET_ISLOADROUTERS:(state,isLoadRouters)=>{
      state.isLoadRouters = isLoadRouters
    }
  },
})

3)/util/index.js:方法动态添加路由工具

import router from '../router'
import store from '@/store'

//动态添加路由
export function generateRoutes() {
    const _asyncRoutes = store.getters.GET_MENULIST
    if(_asyncRoutes==null)
        return
    _asyncRoutes.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                let route = menuToRoute(m, menu.name);
                if (route) {
                    router.addRoute("Home",route)
                }
            })
        }
    })
}

//将菜单转换成router可以识别的路由
const menuToRoute = (menu, parentName) => {
    if (!menu.component) {
        return null;
    } else {
        let route = {
            name: menu.name,
            path: menu.path,
            meta: {
                parentName: parentName
            }
        }
        route.component = () => import('@/views/' + menu.component + '.vue');
        return route;
    }
}

4)/router/permission.js前置路由守卫,判断是否登录和是否已经添加过路由

import router from "@/router/index"
import store from "@/store"
import {generateRoutes} from "@/util";

// 检查是否存在于免登陆白名单
function inWhiteList(toPath) {
    const whiteList = ['/login', '/404']
    const path = whiteList.find((value) => {
        // 使用正则匹配
        const reg = new RegExp('^' + value)
        return reg.test(toPath)
    })
    return !!path
}

router.beforeEach((to, from, next) => {
    console.group('%c%s', 'color:blue', `${new Date().getTime()}  ${to.path} 的全局前置守卫----------`)
    console.log('所有活跃的路由记录列表', router.getRoutes())
    console.groupEnd()
    const token = store.getters.GET_TOKEN
    let isLoadRouters = store.state.isLoadRouters
    if (inWhiteList(to.path)) {
        next()
    } else {
        //用户已登录
        if (token && JSON.stringify(store.getters.GET_MENULIST) !== '[]') {
            if (isLoadRouters) {
                // console.log('路由已添加,直接跳转到目标页面');
                next()
            } else {
                //解决刷新页面空白
                //console.log('重新加载路由,并跳转到目标页');
                let menuList = store.getters.GET_MENULIST
                store.commit('SET_ISLOADROUTERS', true)
                //添加动态路由
                generateRoutes(menuList)

                next({...to, replace: true})
            }
        } else {
            // console.log('无登录信息,跳转到登录页');
            store.commit('SET_ISLOADROUTERS', false)
            next(`/login`)
        }
    }

})

4.坑和知识点

1)遇到的坑

  • 这里有个大坑,就是页面刷新的情况,页面一旦刷新,动态添加的路由也会清空,只剩静态路由,所有还要判断页面刷新的操作,这里通过一个vuex的变量解决,因为刷新操作,vuex的值也会刷新,所以我在vuex中设置了isLoadRouters:false这个变量,如果刷新,这个值就是默认的false
  • 第二个坑就是,在addRoute()之后第一次访问被添加的路由会白屏,这是因为刚刚addRoute()就立刻访问被添加的路由,然而此时addRoutes()没有执行结束,因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行,所以需要next({...to, replace: true}),来保证路由添加完了再进入页面 (可以理解为重进一次)。小伙伴可以试试把它换成next(),看会不会出现白屏。是

这两个坑就已经卡了我很长时间了,更何况还有其他小坑(哭死我了)

  • 用户点击退出后,需要重置路由,不然你添加过路由了,再通过addRoute()方法添加路由就会造成重复添加路由,浏览器的控制台会有警告,不重置也没事,就是看着有点不舒服。

// 重置路由
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher
}

2)学到的知识点

  • js语法:两个感叹号,将非布尔型变量转为布尔值

// 检查是否存在于免登陆白名单
function inWhiteList(toPath) {
    const whiteList = ['/login', '/404']
    const path = whiteList.find((value) => {
        // 使用正则匹配
        const reg = new RegExp('^' + value)
        return reg.test(toPath)
    })
    return !!path
}
  • component: () => import("@/views/Index") 实现路由组件懒加载。vue这种单页面应用单页面应用单页面应用,如果我们不去做路由懒加载,打包之后的文件将会异常的大,就会造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,不利于用户体验,运用懒加载就可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
  • next({...to, replace: true}) 重新访问一次路由,避免路由还没添加完成就访问路
  • router.matcher = newRouter.matcher相当于重置路由,避免重复添加路由

小结

本文介绍了使用Vue实现动态路由。关于这个东西,我网上找的很多教程都不怎么靠谱,给我挖了很多坑,所以希望我的这篇教程可以帮助你,少走点弯路,快速掌握这技术,代码的下载地址在文章开头,记得npm install一下,就可以运行了。如果这篇文章有幸帮助到你,希望读者大大们可以给作者给个三连呀😶‍🌫️😶‍🌫️😶‍🌫️

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4849.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!