桂林网站制作网站制作步骤流程图

什么是导航守卫

在vue路由切换过程中对行为做个限制

1. 全局前置守卫

route.beforeEach((to, from, next)) => {// to是切换到的路由// from是正要离开的路由// next控制是否允许进入目标路由next(false);  //不允许
}

2. 路由级别的导航守卫

const routes = [{path: '/User',name: 'User',beforeEnter: (to, from, next) => {next(false);}},
]

3. 组件内部的导航守卫

在 User.vue组件中加入

export default {beforeRouterEnter(to, from, next) {next(false);}
}

4. 离开路由

beforeRouterLeave(to, from, next) {if(this.isconfirmed) {next();} else {if (confirm('确定要离开吗')) {next();}else {next(false);}}
}