vue新版router.addRoute基础用法

新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由

在添加子路由的时候

比如原现有路由

const routes = [{path: '/',name: 'Login',component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')},{path: '/index',name: 'index',meta: { title: '首页', noCache: true },component: () => import(/* webpackChunkName: "about" */ '@/views/index.vue'),children:[]// children: [{//     path: '/test',//     name: 'test',//     component: () => import('../views/test.vue')// }// ]}
]

想要在index下动态添加子路由test，特别要注意添加的子路由的path一定要把父路由的路径也带上

const routeObj = {path: 'index/test', // 这里要把父路由的路径也带上name: 'test',meta: { title: '测试路由test', noCache: true },component: () =>import('../test/test.vue'),
}
this.$router.addRoute('index', routeObj)

vue新版router.addRoute基础用法相关推荐

一、Vue环境搭建及基础用法
一.项目初始化及安装官网:https://cn.vuejs.org/ 1.1安装及运行项目步骤 1.安装vue-cli(-g=-global)npm install -g vue-clicnpm i ...
VUE组件注册与基础用法
这里写目录标题组件组件注册全局注册组件基础用组件注意事项局部注册 Vue 调试工具 Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递组件插槽匿名插槽具名插槽 ...
Vue中v-on的基础用法、参数传递和修饰符
目录一.v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可 ...
Vue keep-alive组件缓存基础用法
keep-aliive组件 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 当组件在 <keep-alive> 内被切换,它的 activa ...
Vue中Button按钮基础用法及参数属性
根据颜色.形状.图标等等设计美观的按钮使用type.plain.round和circle属性来定义 Button 的样式. <el-row><el-button>默认按钮&l ...
struct用法_精讲响应式webclient第1篇-响应式非阻塞IO与基础用法
笔者在之前已经写了一系列的关于RestTemplate的文章,如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用精讲RestTemplate第2篇-多种底层HT ...
ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...
使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...

vue新版router.addRoute基础用法

vue新版router.addRoute基础用法

vue新版router.addRoute基础用法相关推荐

最新文章

热门文章