vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单
1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
使用方法
this.$router.options.routes[0].children.push({//插入路由
name:'list',
path: 'list',
component: resolve => require(['../template/list.vue'], resolve)//将组件用require引进来
});
this.$router.addRoutes(this.$router.options.routes);//调用a
!
我的路由文件:
export default new Router({
routes: [
{
path: '/',
component: index,
},
{
path: '/login',
name: 'login',
component: login
}
})
vue-router 动态添加 路由的更多相关文章
- Vue页面权限控制和动态添加路由
原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- 【面试题】Vue2动态添加路由 router.addRoute()
Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...
- vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- vue动态添加路由addRoutes之不能将动态路由存入缓存
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...
随机推荐
- python制作模块
自己写的函数,为了下一次方便用,做成模块 主要有这几个步骤: 1:准备发布 2:构建发布 3:导入模块并使用 1:准备发布 首先,我自己写的一个打印出列表(含嵌套列表),打印出列表中的每个数据项,文件 ...
- python设置路径值时为什么要输入r
r:代表处理不转义现象 Python中,u表示unicode string,表示使用unicode进行编码,没有u表示byte string,类型是str,在没有声明编码方式时,默认ASCI编码.如果 ...
- Linux scp命令详解
Linux scp命令 Linux scp命令用于Linux之间复制文件和目录. scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 语法: ...
- django 路由分发
对于一个大的工程,可能会有很多应用,比如cmbd,moniter,openstack等等,我们就要用到路由分发 1,首先在跟工程同名的文件夹下的urls中写分发表: from django.conf. ...
- Excel技巧--单列变多行
当上图的单列转变成多行时,可以这么做: 1.在第一行输入A2.A3,向右拖拉第一行: 2.第二行按第一行最右顺序,写下A12,再向右拖拉出第二行: 3.选择这两行,再拖拉出一串连续顺序的多行来: 4. ...
- micrometer自定义metrics
micrometer提供了基于Java的monitor facade,其与springboot应用和prometheus的集成方式如下图展示 上图中展示的很清楚,应用通过micrometer采集和暴露 ...
- 第26课 可变参数模板(7)_any和variant类的实现
1. any类的实现 (1)any类: ①是一个特殊的,只能容纳一个元素的容器,它可以擦除类型,可以将何任类型的值赋值给它. ②使用时,需要根据实际类型将any对象转换为实际的对象. (2)实现any ...
- Linux配置Supervisor 配置遇到的坑
在linux中web 应用部署到线上后之后发现退出终端后网站就无法访问了 所以需要用Supervisor来守护进程,它可以保证应用一直处于运行状态,在遇到程序异常.报错等情况,导致 web 应用终止时 ...
- java的环境配置
java的安装 1,进入官网 https://www.oracle.com/index.html 2.Menu -> Downloads -> java -> all Java ...
- 一步步实现:springbean的生命周期测试代码
转载. https://blog.csdn.net/baidu_37107022/article/details/76552052 1. 创建实体SpringBean public class Spr ...