vue router导航守卫与不同的历史模式

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

两者区别，有误#