VueRouter 动态路由配置的坑

最新推荐文章于 2025-04-16 09:36:39 发布

未金涛

最新推荐文章于 2025-04-16 09:36:39 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_39753511/article/details/115280313

本文介绍了在Vue项目中使用VueRouter进行动态路由配置时遇到的问题，特别是3级侧边栏动态路由的配置难点。经过5小时的摸索，最终在导师帮助下解决了问题，重点讨论了路由js文件和二级路由页面模板的设置。

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

title: VueRouter 动态路由配置的坑
tags:

router
dynamic

VueRouter 动态路由配置的坑

最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时，最后还是在我师傅的帮助下解决。

路由js文件

  {
   
    path: '/loginHome',
    component: Layout,
    name: 'LoginHome',
    redirect: '/loginHome/login',
    meta:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

未金涛

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue实现动态路由菜单配置

Deku_Ln的博客

01-05

2492

这里感谢router新加的addRoute(route:Array)方法，让我们可以进行相关的路由权限的配置。路由的权限配置这里我介绍一下结合后端的方法。首先我们需要对于路由信息进行数据库的存储，通过后端进行路由的权限控制在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息 const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou

vue动态菜单路由配置

山谷里的杂货铺

11-22

1242

通过调用后台接口来配置导航栏菜单 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/aut

参与评论您还未登录，请先登录后发表或查看评论

Vue 动态路由坑点

passerby_lin的博客

08-02

657

坑点动态路由里面的component在后台配置的是会报错Error：cannot find module ‘@/’ 找不到组件的导入可以使用字符串拼接的方式导入，可以使用模板字符串导入（字符串中含有变量），但是使用模板字符串导入时不能够只使用变量！！必须指定一个目录，不能全用变量代替！

一文教你实现vue-router动态路由菜单

热门推荐

程序员柒的博客

02-09

1万+

紧接上篇文章，vue3的配置与vue2是有所差别的，本文就讲述了如何配置，如果本文对你有所帮助请三连支持博主。下面案例可供参考。

vue路由（路由基本使用，传参，多级路由）

m0_49936845的博客

04-30

2762

vue的一个插件库，专门用来实现SPA应用。

Vue动态路由配置

Codewarning

09-09

6470

前端页面用户登录成功时，接口返回用户菜单，菜单里面包含新增的路由信息，将菜单解析成新增路由，并将其添加到router里面，以及进行持久化操作

Vue 动态添加路由及生成菜单的方法示例

12-12

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

Vue 动态添加路由及生成菜单

青年码农

12-29

712

写管理后台的都会遇到这个这种需求，管理员登录后台需要看到所有功能，普通的公司管理员或部门管理员登录只能看到部分功能权限不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。1 动态添加路由利用 vue-router 的 addRoutes 方法可以动态添加路由。请求接口返回菜单格式如下[ ...

Vue项目实现动态路由和动态导航菜单栏

qq_42797527的博客

11-30

2105

用于前端存储数据，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。Vuex中的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，相应的组件也会得到更新。而全局对象的状态存储是静态的，无法自动更新组件中的状态。根据后端返回的用户的菜单地址进行处理拼装成路由格式，存储到vuex中，并添加到路由里面，若vuex中有用户路由数据，直接放行。2每次路由跳转会通过permission.js进行判断和加载，若vuex中无用户路由数据则请求后端，

vue-router 使用，添加动态路由，以及报错问题

好，很好，非常好

11-20

3703

在使用vue3 的小伙伴，在使用vue3 时候必须使用vue-router4，我最近在使用这个时候异常恼火，因为报错[Vue Router warn]: No match found for location with path "xxx" 解决了好几天，才玩明白，话不多说我们一步一步来，采用静态路由和动态路由结合，来解决这个问题

vue动态生成路由菜单

qq_36566924的博客

11-23

3465

①router文件夹下放2个文件：index. js（放置基础的路由信息）和roleRoute. js（放置需要权限分配的路由） ②index.js文件如下： import Vue from ‘vue’ import Router from ‘vue-router’ Vue.use(Router) export const routerMap=[ {path:’/’,name:‘root’,redirect:‘login’}, {path:‘login’,name:‘login’,component:

vue实现动态路由菜单！！！

TangMonk的博客

11-28

2604

递归处理后端响应的菜单树，后依次通过addRoute方法往静态父路由，添加动态子路由，添加完使用el-menu渲染并添加router属性实现路由菜单模式。

vue3动态路由及菜单

左直拳的马桶_日用桶

09-26

1万+

一般来说，前端项目中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册。具体如何实现呢？思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。这其中，可能会出现默认路由与动态路由有重叠的情况。处理办法是覆盖。数据结构方面，菜单与路由数据二合一。

vue 根据菜单自动生成路由（动态配置路由）

东扯葫芦西扯瓜——前端小菜鸟的博客

11-24

5455

vue 根据菜单自动生成路由（动态配置前端路由）1.创建项目2.新建文件3.到main.js中4.先把菜单组件写好，到menu.vue中5.注册全局组件6.到router文件夹写好路由模块6.1 base-router.js中写好我们需要的固定的路由6.2 lm-router.js中写动态配置路由的方法6.3 index.js中写路由入口7.容器页和加载页7.1 layout.vue7.2 loading.vue8.写筛选菜单和路由的方法9. 登录成功后生成路由在需要权限控制的页面，往往存在根据用户来显示

Vue 2.0 + vueRouter 2.0 + webpack 实例详解：避免新手坑

在开发过程中，作者特别提到了Vue Router 2.0的使用，它允许实现单页面应用（SPA）中的路由管理，对于大型项目和模块化开发至关重要。虽然文中没有提供具体的router配置，但读者可以预期会涉及到定义路由规则、嵌...