vue router导航守卫与不同的历史模式
一、导航守卫
1.1 路由全局守卫（拦截）
在路由器 index.js 设置
//全局守卫
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(true) next();//通行证
})
1.2 路由局部守卫（拦截）
const routes=[
{
name:'user',
path: '/user/:id', //动态路由
component: User,
props:true,//开启
//局部路由守卫
beforeEnter:(to,from,next)=>{
console.log(to);
console.log(from);
if(false) next()
}
},
]
1.3 组件内守卫
data(){
return{
age:18
}
},
beforeRouteEnter(to,from,next){
console.log("路由进入组件之前")
next((that)=>{
console.log("data中age",that.age)
})
},
beforeRouteUpdate(){
console.log("路由更新组件之前")
},
beforeRouteLeave(){
console.log("路由离开组件之前")
},
二、不同的历史模式
- Hash模式 createWebHashHistory
- HTML5模式 createWebHistory
两者区别，有误#
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107033.html
