vue-route的高级使用

73 阅读1分钟

第一种使用二级路由的方式 image.png 使用默认二级路由的第二种方式: image.png 通过动态路由传参的两种方式: 第一种方式:

image.png

image.png

image.png 第二种方式: image.png

image.png 使用监听器 实时监听路由的变化:

image.png

动态添加路由,实现菜单栏变化

父组件把值传给菜单栏组件

image.png 菜单栏组件拿到值渲染:

image.png 使用事件总线方式传值:

image.png 再父页面接收 将要被改变的 路由数组

image.png 在my页面点击添加路由按钮实现添加:

image.png 全局路由守卫:

image.png 局部路由钩子函数 只针对当前的路由的:

image.png 组件内的路由钩子函数:有三个

image.png 组件内路由更新的实战运用:

image.png 组件内路由离开时候的实战运用:

image.png

在组件路由进入组件的获取vue实例化对象:

image.png