Vue开发实例（九）动态路由实现左侧菜单导航

已于 2024-03-03 10:51:16 修改
阅读量3.5k 收藏 24
点赞数 26
分类专栏： # 深度探索 Vue.js 的世界 文章标签： vue.js javascript ecmascript
于 2024-03-03 10:50:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1808814025/article/details/136427197
版权
本文介绍了如何在Vue应用中，通过动态路由和store管理，根据后端返回的菜单数据创建左侧菜单，避免直接访问未授权的路由，以及添加路由加载标记以优化用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前在【Vue开发实例（六）实现左侧菜单导航】文中实现了菜单的导航，本篇是在那个基础上改造的。

动态路由实现左侧菜单导航

一、动态菜单创建

假如我定义了3条路由，分别是 ‘/index/menu1’,‘/index/menu2’,‘/index/menu3’
但当前登录的用户只有 ‘/index/menu1’,‘/index/menu2’ 两条路由的权限，如果按照【Vue开发实例（六）实现左侧菜单导航】的做法，可以直接在浏览器输入’/index/menu3’ 这条路由地址来访问，这显然是不对的，于是我们就需要动态路由。

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

  1. 原来的 menu_data 使用mockjs来返回，模拟后台查询菜单数据返回
    • 在mockjs中定义对象的 /post/menuList 路径get请求
    • 返回参数中除了原来的 name、icon、path 增加了component，用于定义跳转路径。

mock/index.js代码

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/index.js，全部参考代码如下
    在这里插入图片描述
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0,
  menu_data: []
}
const mutations = {
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
  setMenuData(state, data) {
    state.menu_data = data
  },
}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}
const modules = {
  a: moduleA,
  b: moduleB
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  modules
})
  1. 在 router/index.js 里面使用方法 beforeEach 来获取数据，并提交到store

注意：

  • 不要忘记引入axios和store的内容
import axios from "axios";
import store from "@/store/index.js";

在这里插入图片描述

import VueRouter from "vue-router"
import Index from "@/components/Index";
import axios from "axios";
import store from "@/store/index.js";

const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children:[
            {path: '/index/Main',component: () => import('@/components/Main/index.vue')},
            {path: '/index/menu1',component: () => import('@/components/Main/Main1.vue')},
            {path: '/index/menu2',component: () => import('@/components/Main/Main2.vue')},
            {path: '/index/menu3',component: () => import('@/components/Main/Main3.vue')}
        ]
    }
]
const router = new VueRouter({
    mode:'history',
    routes
})
router.beforeEach((to, from, next)=>{
    next();
    axios.get('/post/menuList').then(res=>{
         store.commit('setMenuData',res.data.menu_data)
    });
})
export  default router;
  1. 在 Aside.vue 代码中，data里面的属性menu_data不能直接返回了，需通过computed来返回，并且返回的值是从store里面获取的

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-icon-location,
.el-icon-document,
.el-icon-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

页面效果
在这里插入图片描述

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

在这里插入图片描述

二、根据菜单数据来创建路由

目前的路由写法

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

针对上面的情况，我们可以考虑，通过菜单取到的数据，动态添加这个路由，而不是直接写死。

说干就干！！！

  1. 先将router/index.js这3条路由代码删除
const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children:[
            {path: '/index/Main',component: () => import('@/components/Main/index.vue')},
        ]
    }
]
  1. 在 router/index.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/Main/' + item.component + '.vue')
        }
        oRouters[0].children.push(new_router);
    })
    router.addRoutes(oRouters)
}
  1. 在创建动态菜单的同时调用这个函数，修改 router/index.js
router.beforeEach((to, from, next)=>{
    next();
    axios.get('/post/menuList').then(res=>{
         store.commit('setMenuData',res.data.menu_data);

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

页面展示，点击访问 index/menu1 和 index/menu2正常
在这里插入图片描述

访问 index/menu3 就不会出现页面内容
在这里插入图片描述
全部参考代码

router/index.js

import VueRouter from "vue-router"
import Index from "@/components/Index";
import axios from "axios";
import store from "@/store/index.js";

const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children: [
            { path: '/index/Main', component: () => import('@/components/Main/index.vue') },
        ]
    }
]

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

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/Main/' + item.component + '.vue')
        }
        oRouters[0].children.push(new_router);
    })
    router.addRoutes(oRouters)
}

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

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

export default router;

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

  1. 修改 store/index.js，在store.js的state添加 属性isLoadRoute: false
    在这里插入图片描述
  2. 在router/index.js 添加路由的 router.beforeEach 稍作修改
    在这里插入图片描述

store和router的相关代码如下

store/index.js代码

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';

Vue.use(Vuex)

const state = {
  username: '牛牛',
  userState: 0,
  menu_data: [],
  isLoadRoute: false,
}
const mutations = {
  setLoadRoute(state, data) {
    state.isLoadRoute = data
  },
  setUser(state, name) {
    state.username = name
  },
  setUserState(state, data) {
    state.userState += data
  },
  setMenuData(state, data) {
    state.menu_data = data
  },

}
const getters = {
  getUserState(state) {
    let data;
    if (state.userState == 0) {
      data = '无效'
    } else {
      data = state.userState + '级'
    }
    return data;
  }
}
const modules = {
  a: moduleA,
  b: moduleB
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  modules
})

router/index.js代码

import VueRouter from "vue-router"
import Index from "@/components/Index";
import axios from "axios";
import store from "@/store/index.js";

const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children: [
            { path: '/index/Main', component: () => import('@/components/Main/index.vue') },
        ]
    }
]

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

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/Main/' + item.component + '.vue')
        }
        oRouters[0].children.push(new_router);
    })
    router.addRoutes(oRouters)
}

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();
})

export default router;

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

vue3项目实战(五)---左侧导航菜单栏、菜单组件封装
qq_39253096的博客
03-05 4121
这里字典管理出现了两次。是因为 我们需要根据自己的需要选择当前菜单下只有一个子菜单时，父菜单是否展示。3.1 components新建MenuTree文件夹，文件夹 新建MenuTree.vue。如果父菜单不展示的红色部分改为大于1就可以了。如果父菜单展示的话,红色部分的注释掉即可。我喜欢都展示，所以注释掉了=1的情况。二、route下index.ts调整。三 、MenuTree组件封装。四、NarBar.vue中使用。1.2.1 权限管理。1.2.2 系统管理。五、运行代码查看效果。
vue3:十一、主页面布局(实现基本左侧菜单+右侧内容效果)
最新发布
weixin_46001736的博客
03-22 1156
vue3:十一、主页面布局(实现基本左侧菜单+右侧内容效果)
Vue 3 动态路由与手动导航实现
candy领舞
12-11 1486
本文介绍了如何使用 Vue 3 的 router.addRoute 实现动态路由，并通过手动导航解决新路由无法访问的问题，适合后台管理权限控制场景。
Vue开发实例（六）实现左侧菜单导航
Daniel
03-02 5694
使用el-menu实现左侧菜单导航，说明路由的使用方法，实现动态左侧菜单
Vue3 根据路由动态生成Menu左侧菜单栏
好记性，不如烂键盘。
01-24 3094
根据路由动态生成Menu左侧菜单栏
Vue如何做一个左边栏
weixin_54048131的博客
08-01 1131
要求一-------点击之后能够实现页面跳转,使用router，点击之后跳到指定页面： 第二步：如何实现简易的前端路由 第三步左侧边栏的正确写法，ul中li套router-link 第四步 实现嵌套路由 第五步 ul中嵌套着li 第六步嵌套路由 第七步，他在设置路由规则的时候，分了两部分，第一部分是头部，另一个主体部分 嵌套路由规则 嵌套路由使用前先导入组件，使用组件的三个步骤 点击之后可以修改 我是不是应该改成子路由的嵌套规则
【vue】vue动态展示左侧菜单
小朋友的博客
04-26 1万+
VUE动态展示左侧菜单
vue+iview框架实现左侧动态菜单功能的示例代码
10-15
通过本文的介绍，我们可以了解到使用Vue.js和iView实现动态左侧菜单的整个流程。从定义菜单数据结构开始，到通过Vue实例获取和更新菜单数据，再到最终的样式定制，每一个步骤都是实现动态菜单功能不可或缺的一环。...
vue iview实现动态路由和权限验证功能
08-27
Vue iView 实现动态路由和权限验证功能是一个关键的实践，尤其在开发企业级Web应用时，确保用户只能访问他们被授权的页面。本篇主要介绍如何在Vue框架结合iView UI库的情况下，构建这样的系统。 首先，动态路由分为...
vue.js+element-ui动态配置菜单的实例
10-18
这个实例展示了如何结合 Vue 的数据绑定和 Element UI 的组件，实现根据数据动态生成菜单，以及与 Vue Router 集成实现路由跳转。这种做法具有很高的灵活性，可以根据不同的业务需求进行调整和扩展。在实际项目中，...
vue实现后台管理权限系统及顶栏三级菜单显示功能
10-16
总的来说，通过Vue.js 实现后台管理权限系统和顶栏三级菜单功能，主要涉及路由配置、权限判断、动态路由加载和组件渲染。理解并熟练掌握这些技术，将有助于构建安全、用户体验良好的后台管理系统。
基于vue.js实现侧边菜单栏
10-20
主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue刷新左侧菜单栏实现详解
在Vue.js开发中，左侧菜单栏通常与路由紧密相关，用于导航到不同的页面。在【标题】提到的“通过vue刷新左侧菜单栏操作”中，我们可以看到博主正在解决一个关于菜单栏不自动刷新的问题。这个问题可能是因为菜单项的...
首页导航+左侧菜单
weixin_38170065的博客
08-31 828
1. Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 1. 老大，接口文档还没输出，我的好多活干不下去啊！ 2. 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自...
Vue开发实例（11）之el-menu实现左侧菜单导航
热门推荐
编程界明世隐的博客
05-02 4万+
el-menu实现左侧菜单导航 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
vue 实现动态路由
m0_59006402的博客
01-29 1万+
如果我们希望在调用addRoutes方法之后，要路由数据立刻反映到菜单中，我们需要想一个额外的方法，思考一下，vue开发中，哪个技术可以保证响应式特性还可以动态修改？上一步我们实现了: 1.把动态路由通过addRoutes动态添加到了路由系统里， 2. 把动态路由保存到vuex的menu中，但是我们没有和权限数据做搭配，接下来我们通过接口返回的权限数据对动态菜单做过滤处理，以确定完成菜单与用户权限相关。在router/index.js中的路由配置中 只保留静态路由（因为我们要动态的添加））
vue实现动态路由
huangzi14的博客
02-15 586
vuex刷新页面数据会丢失，所以最好存在localStorage中，返回会的是数组，最好转换成字符串JSON.stringify()方法就可以。我只需要把数据利用循环添加到addRoute()方法中就可以实现。一般前端登录后，后端会返回路由的数据。// 动态路由核心代码。我在vuex中直接就能取。
Vue实现动态路由
无所谓^_^博客
03-23 1万+
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
vue admin-template 怎么实现静态路由的左侧菜单导航
06-02
在 Vue Admin-Template 中，静态路由的左侧菜单导航可以通过以下步骤来实现： 1. 在 `src/router/index.js` 文件中定义静态路由，例如： ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' import About from '@/views/About.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ``` 2. 在 `src/layout/components/Sidebar/index.vue` 文件中编写左侧菜单导航的代码，例如： ```html <template> <div class="sidebar"> <el-menu :default-openeds="openeds" :default-active="active" class="el-menu-vertical-demo" :collapse="collapse"> <el-menu-item index="/"> <i class="el-icon-menu"></i> <span slot="title">Home</span> </el-menu-item> <el-menu-item index="/about"> <i class="el-icon-menu"></i> <span slot="title">About</span> </el-menu-item> </el-menu> </div> </template> <script> export default { name: 'Sidebar', data() { return { openeds: [], active: '/', collapse: false } } } </script> ``` 3. 在 `src/layout/AppMain.vue` 文件中将路由视图组件渲染到页面中，例如： ```html <template> <div class="app-main"> <transition name="fade-transform" mode="out-in"> <router-view></router-view> </transition> </div> </template> ``` 这样，当用户访问对应的路由时，左侧菜单导航会高亮显示当前路由，并展开对应的菜单项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

经理，天台风好大

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值