一.路由传参的三种方式
方式一: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()}