Vue开发实例（15）之动态路由

最新推荐文章于 2024-09-25 09:07:21 发布
最新推荐文章于 2024-09-25 09:07:21 发布
阅读量6.4k 收藏 22
点赞数 10
分类专栏： Vue开发实例 文章标签： vue.js 前端 javascript 动态路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dkm123456/article/details/124480454
版权
本文介绍了如何在Vue中实现动态路由，结合状态管理Vuex处理用户权限，确保无权限的路由无法被访问。通过模拟数据和动态创建菜单，展示了如何根据用户权限动态生成并限制路由，防止非法访问。同时，还讲解了如何避免路由重复加载，优化用户体验。
摘要由CSDN通过智能技术生成

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【14】Vue状态管理store
► 下一篇【16】创建标签页

概述

场景是这样的：
假如我定义了3条路由，分别是 ‘/index/menu1’,‘/index/menu2’,‘/index/menu3’
但当前登录的用户只有 ‘/index/menu1’,‘/index/menu2’ 两条路由的权限，如果按照之前章节的做法，可以直接在浏览器输入’/index/menu3’ 这条路由地址来访问，这显然是不对的，于是这里我们就用到动态路由。

回顾

菜单页面 Aside.vue

<template>
    <div style="height: 100%;">
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" class="el-menu-vertical-demo"
                 router>
            <el-menu-item :index="item.path" v-for="item in menu_data" :key="item.name">
                <i :class="item.icon"></i>{{item.name}}
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return {
                menu_data:[
                    {
                        name:'一级菜单1',
                        icon:'el-icon-location',
                        path:'/index/menu1'
                    },
                    {
                        name:'一级菜单2',
                        icon:'el-icon-document',
                        path:'/index/menu2'
                    },
                    {
                        name:'一级菜单3',
                        icon:'el-icon-setting',
                        path:'/index/menu3'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;

    }
</style>

路由代码 router.js


import VueRouter from "vue-router"
import Index from "./components/Index";
import Aside from "./components/Aside";

const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: '/index/Main',
        //路由嵌套
        children:[
            {path: '/index/Main',component: () => import('./components/Main.vue')},
            {path: '/index/menu1',component: () => import('./components/Main1.vue')},
            {path: '/index/menu2',component: () => import('./components/Main2.vue')},
            {path: '/index/menu3',component: () => import('./components/Main3.vue')}
        ]
    },
    {
        path: '/aside',
        name: 'aside',
        component: Aside
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export  default router;

下方的3条子路由，假设后端只返回menu1和menu2这2条，也就是这路由，我们只需动态创建2条即可。
在这里插入图片描述

动态创建菜单

目前菜单已经是动态创建了，只是数据是写死的，就用之前章节的mockjs来模拟数据，并且动态数据中没有menu3，这样就只会创建出前两个菜单。

  1. 原来的 menu_data 使用mockjs来返回，模拟后台查询菜单数据返回：
  • 在mockjs中定义对象的/post/menuList 路径get请求
  • 返回参数中除了原来的 name、icon、path 增加了component，用于定义跳转路径。
Mock.mock('/post/menuList','get',function(){
    const menu_data = [
        {
            name:'一级菜单1',
            icon:'el-icon-location',
            path:'/index/menu1',
            component:'Main1'
        },
        {
            name:'一级菜单2',
            icon:'el-icon-document',
            path:'/index/menu2',
            component:'Main2'
        }
    ]

    return{
        menu_data
    }
});
  1. 在store.js中修改

state 增加属性menu_data

const state ={
    username: '明世隐',
    userState:0,
    menu_data:[]
}

mutations 中增加方法setMenuData

setMenuData(state,data){
   state.menu_data = data
}
  1. 在router.js 里面使用方法 beforeEach 来获取数据，并提交到store
  1. axios.get(‘/post/menuList’) 获取模拟后台传来的菜单数据
  2. store.commit(‘setMenuData’,res.data.menu_data) 提交数据
router.beforeEach((to, from, next)=>{
    next();
    axios.get('/post/menuList').then(res=>{
         store.commit('setMenuData',res.data.menu_data)
    });
})
  1. data里面的属性menu_data不能直接返回了，需通过computed来返回，并且返回的值是从store里面获取的
computed:{
   menu_data:{
       get(){
           return this.$store.state.menu_data
       }
    }
}

此时Aside.vue完整代码如下：

<template>
    <div style="height: 100%;">
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" class="el-menu-vertical-demo"
                 router>
            <el-menu-item :index="item.path" v-for="item in menu_data" :key="item.name">
                <i :class="item.icon"></i>{{item.name}}
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return {}
        },
        computed:{
            menu_data:{
               get(){
                   return this.$store.state.menu_data
               }
            }
        }

    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;

    }
</style>
  1. 页面效果
    在这里插入图片描述

此时菜单确实只有2个菜单，点击菜单也能对应访问到路由menu1和menu2，但是当我们在地址栏输入 menu3的时候，也能访问，这显然是不对的，因为我们的路由是静态写死的，这里肯定是不合理的，所以需要动态来修改一下。

在这里插入图片描述

根据菜单数据来创建路由

先看看我们目前路由的写法
在这里插入图片描述
针对上面的情况，我们是不是可以考虑，通过菜单取到的数据，动态的添加这个路由呢，而不是直接写死。

  1. 先将这3条路由代码删除

在这里插入图片描述
2. 在router.js中创建添加动态路由的方法 buildRouter

let oRouters = router.options.routes;
const buildRouter = ()=>{
    let data = store.state.menu_data;
    data.forEach(item=>{
        let new_router = {
            path:item.path,
            component:() => import('./components/'+item.component+'.vue')
        }
        oRouters[0].children.push(new_router);
    })
    router.addRoutes(oRouters)
}
  1. 在创建动态菜单的同时调用这个函数

修改之前的 beforeEach，调用buildRouter

router.beforeEach((to, from, next)=>{
    next();
    axios.get('/post/menuList').then(res=>{
         store.commit('setMenuData',res.data.menu_data);

        //动态创建路由
        buildRouter();
    });

})
  1. 测试

menu1 menu2 测试点击正常

在这里插入图片描述

地址栏输入menu3，页面无法显示，因为没有这条路由

在这里插入图片描述

添加路由已加载标记，省的每次点击菜单都要加载

  1. 在store.js的state添加 属性isLoadRoute为false
    在这里插入图片描述

  2. 在 mutations 添加更新方法

setLoadRoute(state,data){
    state.isLoadRoute = data
}
  1. 在router.js 添加路由的 router.beforeEach 稍作修改
router.beforeEach((to, from, next)=>{
    //判断路由是否已经加载过
    let isLoadRoute = store.state.isLoadRoute;
    if(!isLoadRoute){
        axios.get('/post/menuList').then(res=>{
            store.commit('setMenuData',res.data.menu_data);

            //动态创建路由
            buildRouter();
            //设置已经加载过的标记
            store.commit("setLoadRoute",true);
        });
    }
    next();
})

此时点击菜单就不会重复加载了。

小结

这节总结了“ 动态路由 ”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java和前端的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

在这里插入图片描述

导航

✪  Vue开发实例目录总索引
◄ 上一篇【14】Vue状态管理store
► 下一篇【16】创建标签页

热门专栏推荐

【1】Java小游戏（俄罗斯方块、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、宿舍管理等）
【3】JavaScript精彩实例（飞机大战、验证码等）
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通
在这里插入图片描述

编程界小明哥
关注
专栏目录
Vue的动态路由
Fairy的博客
12-16 507
我对vue中Router的解释，可以到https://blog.csdn.net/Gbing1228/article/details/103556607了解 一、什么是动态路由？ 例如：点击不同的歌手进入到不同的歌手详情页 虽然每个请求的id不同，但是都会导航到同一个组件中，在配置路由的时候就不能写死。在vue-router中，动态路由由“：”开头。 <router-link t...
Vue实现动态路由
无所谓^_^博客
03-23 1万+
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
Vue.js 中的动态路由
未思
03-12 2万+
在文章 使用vue-router完成简单导航功能 中实现的路由导航功能是不能传递参数的，也就是说是静态路由。 而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由 那么如何将参数作为路由呢？ 在参数名前面加上 : ，然后将参数写在路由的 path 内 如下示例： routes: [ //将页面组件与path指令的路由关联 ...
Vue Router 动态路由
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-25 1453
在构建基于 Vue.js 的单页面应用（SPA）时，Vue Router 是一个不可或缺的工具，它提供了声明式的路由功能，使开发者能够轻松地管理和控制应用内的导航逻辑。动态路由是 Vue Router 中的一项重要特性，它允许我们根据运行时的数据来动态地匹配路由，这对于需要根据用户输入或后端响应来调整应用行为的场景尤其有用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。动态路由是指在路由定义中包含动态部分的路由，这些部分通常使用占位符（如。
Vue.js路由 -- 动态路由
CSDN_GMC的博客
05-31 670
vue-router 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', nam
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 1318
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
vue 实现动态路由的方法
11-19
在Vue.js应用中，动态路由是一种非常实用的功能，它允许我们根据不同的条件或者从服务器获取的数据来决定应该显示哪个组件。这种技术常用于权限管理，确保用户只能访问他们被授权的页面。以下是如何在Vue中实现动态...
vue实例，watch监听路由地址的改变
08-19
在Vue.js框架中，路由是应用中导航的核心组成部分。它允许我们根据URL的不同展示不同的组件，实现页面间...在实际开发中，`watch`不仅可以用于监听路由，还可以监控其他任何数据属性，为我们的应用增加丰富的动态行为。
vue-router之nuxt动态路由设置的两种方法小结
10-17
在Vue.js应用中，路由管理是非常关键的一部分，特别是在Nuxt.js框架中，它是一个基于Vue.js的服务器渲染框架。...在实际开发中，了解并熟练掌握这两种动态路由设置方法，能够更好地优化项目结构和代码组织。
Vue动态路由缓存不相互影响的解决办法
10-17
其中，动态路由缓存的问题非常具有代表性，因为它涉及到Vue的路由系统以及组件的状态管理。本篇文章将探讨如何解决Vue动态路由缓存不相互影响的难题。 首先，我们需要了解在Vue中key的作用。key是Vue的虚拟DOM中...
vue 实现动态路由
热门推荐
星星的博客
05-19 6万+
1、什么是动态路由？ 2、动态路由的好处 3、动态路由如何实现 1、什么是动态路由？ 动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。 总结： 1）路由可变，不是写死的，动态加载 2）存储分两种：存前端，存数据库 2、动态路由的好处 使用动态路由可以跟灵活，无需手工维护，我们可以使用一个页面对路由进行维
Vue 动态设置路由参数的案例分析
01-21
在vue中 可以动态设置路由参数： 1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例： <template> <div> <button @click=goht>后退<button> <br> <button @click=goqj>前进<button> <br> <button @click=gosx>刷新当前<button> </div> </template> [removed] export default {
vue动态路由
m0_51079637的博客
04-26 7622
前言 当我们开发的系统涉及多权限的情况下，就需要对菜单进行分权限展示，对于管理员A可以展示用户数据页面，但不能展示经营盈亏页面，对管理员B可以展示经营盈亏页面，不能展示用户数据页面。 那么对于我们来说就需要对路由进行隐藏，但vue最常用的静态路由很难实现这种情况，即便是将菜单栏实现了菜单隐藏，但由于静态路由还是存在的，所以当用户在得知路由的情况下，可以在导航栏手动输入路由进行跳转。虽然这种情况可以使用路由守卫进行拦截，但当权限划分过于细腻后，编写的路由守卫将会过于复杂，冗余；所以更为适用的则是动态路由。 优
Vue 动态路由
℡メ㏑╭ァ小凯
07-29 1万+
3、router.beforeEach里面判断是否登录，且store对象里面的值是否为空，然后直接重新去localstore再绑定一次路由，调用next({...to,replacetrue});2、动态集成路由componentName()=>import(`@/pages/${view}`)2、登录后把数据库的菜单调用router.addRoute加到路由中，然后把菜单存本地localstore。1、定义一个store对象，这个是vue里面的全局对象，刷新后值会丢失。...
Vue实现动态路由【记录学习的快乐】
weixin_55639808的博客
05-05 4338
动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。总结：1：路由可变，不是写死的，动态加载；2：存储分两种：存储前端、存储数据库。
vue实现动态路由一步到位
hunt_er的博客
12-04 5万+
最近在写vue项目，需要由后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)，就是配置vue动态路由啦。 由于错信了一些网上的文章:(，导致在这个问题上耗费了不少时间，想想，还是自己写一篇文章来记录一下那些遇到的坑吧。 接下来手把手记录一下，如何从零开始配置vue动态路由。 首先呢，先看看静态路由的配置，简单预览一下，熟悉的可以直接跳过，说这部分，是为了熟悉一下路由的配置。 静态路由的回顾 1.创建router/index.js文件 import Vue from 'v
vue动态路由示例
富在术数不在劳身,利在势局不在力耕。
06-03 185
<!DOCTYPE html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vueRouter.js"></script> </head> <body> <div id="app"..
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程界小明哥

请博主喝瓶水，博主持续输出！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值