Vue-router的高级用法

270 阅读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 具体视频见B站space.bilibili.com/389867563/?…