第一种采用params传参的方式:
第二种采用query传参的方式:
params传参和query传参的区别:
★但是采用params的方式一刷新值就消失了 */
/* 用params传值 只能采用name的方式 不能采用path否则id就传不过去 */
/* params传参 参数是不会在地址栏展示出来 */
/* 采用query传参的方式比params好在,刷新之后值不会消失 */
/* query传参可以使用path的方式而params不可以 */
/* 使用query传参 参数是会在地址栏上明文展示出来 */
路由的返回上一页、跳转下一页、刷新和替换当前页
vue-ruter的高级使用
第一种使用二级路由的方式
使用默认二级路由的第二种方式:
通过动态路由传参的两种方式:
第一种方式:
第二种方式:
使用监听器 实时监听路由的变化:
动态添加路由,实现菜单栏变化
父组件把值传给菜单栏组件
菜单栏组件拿到值渲染:
使用事件总线方式传值:
再父页面接收 将要被改变的 路由数组
在my页面点击添加路由按钮实现添加:
全局路由守卫:
局部路由钩子函数 只针对当前的路由的:
组件内的路由钩子函数:有三个
组件内路由更新的实战运用:
组件内路由离开时候的实战运用:
在组件路由进入组件的获取vue实例化对象:
路由元信息:
动态路由的添加:
/* 动态路由添加 */
addRouteFn(){
console.log(this.$router)
this.$router.addRoute('Home',{
path: 'treepage',
name: 'TreePage',
component: () => import('../views/TreePage.vue'),
meta:{
name:"权限树",
keepAlive:true,
icon:"el-icon-umbrella"
}
})
this.fullRouteArr.push({
name:'权限树',
icon:"el-icon-umbrella",
path:'/home/treepage',
});
},