路由全局守卫
|
首先 创建路由配置 const router = new VueRouter({…}) 然后注册一个全局的前置守卫 router.beforeEach((to,from,next)=>{…}) 每个守卫方法接受三个参数： to ：Route : 即将要进入目标 路由对象 from：Route : 当前导航正要离开的路由 next：Function: 一下通过一个cli中的实例来进行说明全局守卫的作用
声明个函数 下面用的
2.获取设置的sessionStorage
const isLoged = () =>{
return sessionStorage.getItem(‘loged’)
}
首先注册一个全局守卫 在 index.js中（
const router = new Router({routes})
router.beforeEach((to,next)=>{
3.判断 如果给路由设置的meta.auth有没有 如果有的话就判断 sessionStorage有没有 如果有就跳转路由 如果没 就跳到 login页面 同时用query传递URL地址中可见的参数 to.fullpath也就是刚才输入的没有跳转的页面的地址
if(to.matched.some(route=>route.meta.auth)){
isLoged() ? next() : next({path:’/login’,query:{returnURL: to.fullpath}})
}else {
next()
}
})
）
上文是全局守卫的设置 以下是组件中对应全局守卫的设置
methods:{
1.login函数得由组件中的事件调用当点击按钮时调用login函数 设置sessionStorage
login(){
sessionStorage.setItem(‘loged’,true)
4.如果点击了按钮 那么就会跳转到刚才输入的没有跳转到的页面 如果正常输入就会跳转到首页
const path = this. 想要在cli中运用全局守卫的步骤 1.首先按照 vue-cli生成一个cli框架 2.在components文件夹中生成组件 3.在index.js文件中配置路由组件 并引入组件（也可以单独设置一个routes.js在其中引入组件 并在数组中进行路由配置 并导出 然后在index.js中接收 并在index中再生成一个路由配置对象 并把导入的路由跟数组配置的文件模块放进去 再给路由配置对象.beforeEach 详细见上文） （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |