vue3 vue-router 钩子函数
2021-12-08 本文已影响0人
微笑的弧度_c50f
全局路由守卫(vue-router4.0中将next取消了,可写可不写,return false取消导航,undefined或者是return true验证导航通过)
- router.beforeEach((to,from)=>{}),next是可选参数,可写可不写,return false是取消导航,如果返回值为true或者是undefined意味着通过验证
(路由跳转之前拦截) - router.afterEach((to,from)=>{}) (路由跳转之后)语法糖: to.fullPath 可以直接获取 当前的URL路径及传参
路由独享
const routes = [
{
path:"/home",
name:"home",
component:Home,
beforeEnter:(to,from) =>{
//to是当用户点击进入当前页面的时候,我们可以进行一些拦截设置
//from当来自其他页面进入当前页面的时候,我们也可以进行拦截提示用户
alert('我是路由独享守卫!!!')
}
}
]
组件中的路由守卫
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后,进行触发
console.log(to);
})
onBeforeRouteLeave((to,from)=>{//离开当前的组件,触发
alert('我离开啦')
})
新增的动态路由的添加方法
- addRoute:新添加路由页面(也可以添加子页面路由)
// 添加一级路由
router.addRoute({
path:"/router",
name:"router",
component:()=>import('../views/router.vue')
})
// 添加二级路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })//1 父路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })//1 子路由
// * 如果上面添加的路由页面没有变化,那么就添加这行代码
router.replace(router.currentRoute.value.fullPath)//替换当前路由页面的路由
router.removeRoute('router'); // 删除路由;