Vue-Router

最新推荐文章于 2023-03-16 19:35:58 发布
最新推荐文章于 2023-03-16 19:35:58 发布
阅读量119 收藏
点赞数
分类专栏： vue-router vue demo 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45965211/article/details/113180774
版权
本文介绍如何在Vue小项目中使用vue-router动态注册路由，以及动态创建组件。根据需求，通过动态生成页面来应对后台数据的变化。核心在于理解和使用`router.addRoutes()`方法，同时注意避免重复注册导致的路由失效问题。
摘要由CSDN通过智能技术生成

小项目 vue-router 动态添加

需求：项目中设计一个动态的后台数据 对应项目中的一个页面 所以需要动态生成一些页面
那么问题来了！
1.怎么动态添加路由？
2.怎么动态创建组件？

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-router 怎么实现动态注册路由

在vue-Router 官方文档中
router.addRoutes(routes: Array)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

注意：这里的routes选项一定不能重复，否则前一次注册的路由会失效

路由

1.选择使用 pinyin 插件 (https://github.com/yoshixmk/pinyin)

  const a = pinyin(componentName, {
最低0.47元/天 解锁文章
weixin_45965211
关注
专栏目录
vue-router
weixin_45578684的博客
07-03 501
vue-router
vue3动态路由add-Route添加多个路由。
琼楼玉宇
03-29 5468
const about = { //接口返回路由信息 path: '/about', name: 'About', component: () => import('./views/About.vue') }; router.addRoute(about); //添加到路由 添加多个的话就需要遍历了。它本身其实是数组。 这里我们只需要component的内容。 function routerPackag(routers:any) { if (routers) ...
Vue 多个路由文件的合并
南北极之间
09-15 1302
如图： 方法： 1.导入（把想要合并的其他路由文件） 2.数组合并concat()方法 如果要合并多个文件的话。就用es6的方法 set let allRoutes = new Set([...fullPath, ...userRouter,...errorRouter]); 如图：
Vue嵌套(多级)路由
见证自己学习,成长的记录
02-02 3367
嵌套路由就是在路由里面继续加一个新的路由。也叫多级路由，其实就是套娃在开发中，很少会套到六层路由，一般到达4或5层路由已经达到极限了，明白了路由的规律，不管套多少层都是一样的，下面演示二级路由path : '/home' , component : Home , children : [ //通过children配置子级路由 {path : 'news' , //此处一定不要写：/news component : News } , {
50、路由vue-router
sunnnnh的博客
06-10 2297
1、 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 　　路由中有三个基本的..
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
最新发布
02-25
【标题】：“管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板”是一个基于现代前端技术栈构建的后台管理应用框架。这个框架使用了Vue.js的2.0版本，Vue-router进行页面路由管理和ElementUI作为...
Vue学习之VueRouter的基本用法(多而全)
five-five
03-16 3811
重定向是指将一个路由重定向到另一个路由，可以是一个字符串或者一个路由配置对象。在Vue Router中，我们可以在路由配置中使用。路由元信息是指在路由配置中定义的一些额外信息，例如页面标题、页面描述、页面关键字等。命名路由是指在路由配置中为路由命名，以便在代码中使用。在Vue Router中，我们可以通过配置子路由来实现路由嵌套。在Vue Router中，我们可以在路由配置中使用冒号。这个方法会在每次路由跳转后执行，可以用来做一些页面切换后的处理，例如页面滚动到顶部等。在该函数中，可以指定返回的位置。
Vue Router路由配置
qq_41807561的博客
03-05 378
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； 　　routes：它是...
vue-router教程合并
wang535956800的博客
09-16 1188
截取vue-router教程，目的是为了更方便回顾
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router路由传参的几种方式-案例
JackieDYH的博客
08-25 4031
说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { this.$router..
vue router 引入多个路由文件
weixin_33859504的博客
02-27 7686
背景：vue 项目 想把路由文件分为几个子文件，通过 export/import 的方式 引入到 index.js 中，这样做使得项目路由文件更加清晰，不至于都堆在一个文件里，难以查找。解决办法：增加子文件：xxx.jslet router = {} export default router复制代码index.js 中用 import 引入---------------------------...
Vue.js
Fatumz的博客
04-27 1127
开始 引入 开发环境版本，包含了有帮助的命令行警告 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 简单实例 <div id="app"> // {{}}替换部分内容 <p>{{name}}{{age+'岁:'}} {{}}替换部分内容</p> // v-text将会替换所有内
vue根据角色动态路由的实现方式
xiaoququ的博客
09-02 2983
思路一： 路由文件，分为静态路由和动态路由 登录成功，判断角色，addRoutes添加动态路由 根据路由生成菜单栏 方法一：直接获取路由this.router.options.routes，但是addRoutes添加的动态路由使用该方法获取不到解决方法：在addRoutes添加动态路由前，手动拼接静态和动态路由，赋值给options。this.router.options.routes，但是addRoutes添加的动态路由使用该方法获取不到 解决方法：在addRoutes添加动态路由前，手动拼接静态和动
vue-router 动态添加 路由
凡夫俗子
11-21 3万+
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单，前端动态添加路由  然后在设置菜单  1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。            使用方法  this.$router.options.routes[0].children.push({//插入路由
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值