vue之路由传参，跳转，钩子函数

Posted 2023-03-14

参考技术A 一.路由传参的三种方式

方式一：query的方式进行，通过添加？的方式传参

App页面配置：

childa页面配置：

方式二：通过id的方式传参，用到params

App页面配置：

childb页面配置：

index.js配置：

方式三：通过props：['id']的方式进行id方式的传参，不需要用到params

app页面配置和上面id一样

childb页面配置：

index.js页面：

二.路由的跳转

1.使用push的两种方式进行跳转指定页面

2.添加一级路由：

（1）写一个按钮，然后写个方法，执行方法后进行路由的添加

（2）写好要跳转的页面

3.添加二级路由：

（1）写一个按钮，然后写个方法，执行方法后进行路由的添加

（2）写好要跳转的页面

三，路由的钩子函数（全局和局部）在router的index.js里配置

1.全局路由守卫，每次路由跳转都会执行一遍

router.beforeEach((to,from,next)=>

next()//这个必须写

)

to:表示要去的路由，from：表示之前的路由，next：必须要执行的函数，next表示跳转方法

2.监听全局路由离开时触发的钩子函数

没有next（）

router.afterEach((to,from)=>

)

3.局部路由钩子函数

局部的路由钩子进入路由的时候触发

因为同一个路径参数不同或者是动态路由，不会触发beforeEnter

beforeEnter:(to,from,next)=>

next()