protector de navegación del enrutador vue con diferentes modos de historial
1. Guardia de navegación
1.1 Guardia global de enrutamiento (intercepción)
En el conjunto index.js del enrutador
//全局守卫
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(true) next();//通行证
})
1.2 Enrutamiento de guardia local (intercepción)
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 Guardas dentro de los componentes
data(){
return{
age:18
}
},
beforeRouteEnter(to,from,next){
console.log("路由进入组件之前")
next((that)=>{
console.log("data中age",that.age)
})
},
beforeRouteUpdate(){
console.log("路由更新组件之前")
},
beforeRouteLeave(){
console.log("路由离开组件之前")
},
2. Diferentes modelos históricos
- Modo hash createWebHashHistory
- Modo HTML5 createWebHistory
La diferencia entre los dos es incorrecta #