如何在vue3中实现动态路由

最新推荐文章于 2025-06-26 09:52:40 发布

原创

最新推荐文章于 2025-06-26 09:52:40 发布 · 4.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

选用技术栈vue3+typescripy+element-plus ui+router 4

编写通用动态路由菜单

目标:根据路由配置信息，自动生成菜单内容。实现更通用、更自动的菜单配置。
通用路由菜单组件实现步骤
1.提取通用路由文件
2.菜单组件读取路由，动态渲染菜单项
3.绑定跳转事件
4.同步路由的更新到菜单项高亮
5.按需补充更多能力

(1)提取通用路由文件

把 router/index.ts 中的路由变量定义为单独的文件 routes.ts，代码如下:

export const routes: Array<RouteRecordRaw> = [
    {
        path: '/shouye',
        name: '首页',
        component: Shouye,
    },
    {
      path: '/keichengxuexi',
      name: '课程学习',
      component: Courselearning,
    },
}

然后在 router/index.ts 中引入 routes.

(2)菜单组件读取路由，动态渲染菜单项

<script setup lang= ts >
import { routes }from "../router/routes";
</script>

模板中根据路由数组渲染菜单：

<el-menu-item v-for="item in routes" :key="item.path">
  {
  
  { item.name }}
</el-menu-item>

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员柚子

关注关注

12
点赞
踩
13

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue3后台系统动态路由实现

weixin_40348267的博客

01-09

1295

动态路由的流程：用户登录之后拿到用户信息和token，再去请求后端给的动态路由表，前端处理路由格式为vue路由格式。

关于在 Vue3 中实现动态路由

繁若华尘的博客

02-24

586

在 Vue3 中实现动态路由主要依靠 Vue Router 4 的 addRoute 方法

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

vue3中如何实现动态路由，得到动态数据

m0_74345597的博客

08-15

561

前端动态路由设计，后端路径参数接收

vue3动态路由的实现

热门推荐

m0_74331185的博客

04-17

1万+

完成效果第一步：配置静态路由第二步实现登录和安全守卫第三步：发送请求获取用户动态菜单配置二级动态刷新导致动态路由匹配不到直接 404 第五步设置菜单数据缓存最后实现最终效果

vue 实现动态路由的方法

11-19

以下是如何在Vue中实现动态路由的详细步骤： 1. **与后端协作**：在开始之前，你需要和后端开发人员沟通，让他们提供一个包含所有路由信息的接口，这些信息通常包括路径（path）、组件（component）以及其他元...

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

01-21

如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种：前端将全部路由规定好，登录时根据用户角色权限来动态展示路由；路由存储在数据库中，前端通过接口获取当前用户对应路由列表并进行...

vue3动态路由+菜单栏的实现示例

菜鸟教程

05-09

3194

动态添加路由只要提前定义好服务器数据，约定好格式，做起来还是很简单的。只要能根据component字段正确的导入组件就没什么大问题，不过这只是一个简单的示例，实际开发还是有很多情况要处理的。到此这篇关于vue3动态路由+菜单栏的实现示例的文章就介绍到这了,更多相关vue3动态路由+菜单栏内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！

Vue3 实现动态路由

2301_79544047的博客

01-24

1588

通过自主学习实现简单的动态路由参考网址。

【vue3动态路由】

qq_45617169的博客

07-16

1057

还有一点，页面刷新时跳转404页面问题，来不及刷新就跳到了404，因为我修改的顺序有点乱，不知道是哪里有的效果。可能是因为404这个不要写在index.ts中，分别写到user.ts和根据菜单添加路由的最后(总之就是要放在最后面，不然可能先去404了，可能有用，也可能上面刷新的写对了就行)。动态路由在页面刷新后就没有了，只有注册router时的index.ts中的路由，因此需要在main.ts中刷新。之后刷新页面时根据localStorage中的菜单数据(包括路由信息)添加到路由中即可。

vue3-动态添加路由

m0_74019046的博客

03-31

3224

通过 import.meta.glob() 导入的路由default就是路由对象3. 添加路由因为获取本地的路由文件刷新后会消失，在pinia中设置一个方法用来在页面刷新后重新加载路由loadLocal 具体操作和上面添加路由的方式相同。刷新页面后，会重新加载 pinia，在pinia加载完后再加载本地数据，添加路由。

vue3如何实现动态路由

weixin_59244784的博客

01-03

2257

vue3如何实现动态路由

vue3权限管理——（路由权限）动态路由设置

黎小小的博客

08-24

9733

错误页面必须也使用动态添加方法，并且在路由动态添加完成后再添加，否则如果在基础路由中定义错误页面，那么每次点击路由都会首先找路由，没找到就会匹配到错误页面，从而跳转到错误页面。且路径必须有 "/"添加动态路由方法中，是使用router.addRoute()方法进行添加，Home表示将路由嵌套在Home页面下。以7.2的方式，在动态添加完其他路由后，再添加错误页面就能成功导到不同路由页面，但是警告依然会存在。注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用。，才能显示该新路由。

vue3动态路由实现

油墨香^-^的博客

08-08

672

在这个例子中，我们使用字符串拼接的方式来生成带有动态参数的链接，并通过。这样，您就可以在 Vue 3 中实现动态路由。若要生成带有动态参数的链接并进行页面跳转，可以使用。是一个占位符，表示一个动态的参数。来获取动态路由中传递的参数，并在组件中进行展示。在这个例子中，我们定义了一个动态路由。在要接收动态参数的组件中，可以通过。或者编程式导航进行页面跳转。在这个例子中，我们使用了。获取到动态传递的参数值。都会匹配到同一个组件。或者编程式导航（通过。组件，并且您可以通过。

vue3动态路由如何设置

A12536365214的博客

08-12

1440

如果尚未安装 Vue Router，可以通过 npm 或 yarn 进行安装。首先，创建一个或多个需要用作动态路由的组件。在创建 Vue 应用的主文件（通常是。导航到动态路由，或者在代码中使用。）中配置 Vue Router。在动态路由组件中，可以通过。来访问传递的动态参数。在javascript。

如何在 Vue3 中实现动态路由参数的正确传递？

10-29

在Vue3中，动态路由参数通常用于匹配URL中的变量，比如`/users/:userId`，其中`:userId`就是一个动态参数。要实现在组件间正确传递这些动态参数，你可以按照以下步骤操作： 1. **设置动态路由**：在`src/router/index.js`文件中，配置动态路由时需要提供一个占位符（如上面例子中的`:userId`)： ```javascript const routes = [ { path: '/users/:userId', name: 'UserDetail', component: () => import('./views/UserDetail.vue'), props: true, }, ]; ``` `props: true` 表示允许从父路由传入prop。 2. **接收参数**：在`UserDetail.vue`组件的模板上，通过`v-bind="$route.params"`将动态路由参数绑定到组件的属性上： ```html <template> <div> 用户详情 - {{ userId }}  </div> </template> <script setup> import { ref } from 'vue'; // 使用ref存储动态参数 const userId = ref($route.params.userId); </script> ``` 3. **使用参数**：现在可以在组件内部的任意地方访问这个参数，就像处理普通的Vue数据一样： ```javascript <p>User ID: {{ userId.value }}</p> ```