VueRouter 动态路由配置的坑

VueRouter动态路由配置实战与陷阱

最新推荐文章于 2025-10-05 06:11:41 发布

原创

最新推荐文章于 2025-10-05 06:11:41 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

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

2551

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

Vue Router 实现动态路由和常见问题解决方案

良_123的专栏

03-08

5943

ue Router 实现动态路由和常见问题解决方案

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

Vue 动态路由坑点

passerby_lin的博客

08-02

760

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

vue踩坑笔记05---动态路由

qq_43738157的博客

01-03

276

vue踩坑笔记05---动态路由视图渲染：视图渲染：个人学习总结，欢迎批评指正

动态路由踩坑指南

LGEC_的博客

11-23

1377

一、动态路由添加没反应动态路由的添加一般是在permission.js文件中 vue router导航守卫中进行配置，添加动态路由 router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { /* has token*/ if (to.path === '/login') { next({ path: '/' }) NProgress.done()

vue动态菜单路由配置

山谷里的杂货铺

11-22

1254

通过调用后台接口来配置导航栏菜单 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-router路由切换组件重用挖下的坑

10-16

在vue-router中，如果两个路由配置的组件相同，如以下代码所示： ```javascript export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] }) ``` 当...

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

m0_49936845的博客

04-30

2861

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

Vue基础教程（165）Vue Router之HTML页面使用路由：拿捏Vue Router，让你切页面像德芙一样纵享丝滑

最新发布

jxf_jxfcsdn的博客

10-05

650

还在为网页跳转白屏、卡顿而头大吗？告别传统开发的“页面刷新酷刑”，拥抱Vue Router带来的单页面应用（SPA）丝滑体验！本文将用最接地气的方式，带你深度玩转Vue Router在HTML页面中的基础操作。从环境搭建到核心概念，从路由配置到动态传参，全程附上可复制粘贴的完整代码示例。让你轻松理解路由的本质，从此页面切换行云流水，用户体验直接拉满！准备好了吗？一起开启前端路由的魔法之旅！

Vue动态路由配置

Codewarning

09-09

6540

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

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

12-12

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

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

青年码农

12-29

740

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

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

qq_42797527的博客

11-30

2209

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

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

好，很好，非常好

11-20

3873

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

vue动态生成路由菜单

qq_36566924的博客

11-23

3504

①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

2880

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

vue3动态路由及菜单

热门推荐

左直拳的马桶_日用桶

09-26

1万+

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

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

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

11-24

5548

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实现动态路由，请求服务端菜单数据，封装并添加到Vue前端路由中

服务员的博客

04-06

3587

permission里面通过请求数据接口加载封装为vue路由数据，通过store存储，定义一个Mutation，把封装的路由存到store里面，在router/index.js里通过先拿到store的路由数据惊醒判断，如果没有就先进行获取刷新和添加动态路由。减少前端的操作，只需在后端进行添加新的路由菜单，存储到数据库，还可以增加安全性和实用性！本文场景十用户访问网站，请求后端菜单目录的数据接口，然后菜单数据封装为前端路由结构，通过和路由文件中定义的静态路由做拼接，组成最终的路由，在前端显示。

vue3的addrouter动态路由

08-18

// 初始路由配置 // ... ], }); // 动态添加路由 const newRoute = { path: '/dynamic-route', name: 'DynamicRoute', component: DynamicRouteComponent, }; router.addRoute(newRoute); ``` 在上面的例子...