Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.10 路由守卫

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第7章 Vue.js高级进阶

7.10 路由守卫

路由守卫就是在进入页面之前做一层判断，如果没有守卫，则可以直接进入页面，如果添加了守卫，则需要做页面跳转

举个栗子：

有3个组件，登录、商品详情、购物车。

当用户单击商品详情时，可以直接进入页面，当单击购物车时，需要判断是否登录，如果登录即可进入购物车，如果没有登录则需要先跳转到登录页面。

【路由守卫分为全局路由守卫、组件内路由守卫和离开组件时路由守卫】

7.10.1 全局路由守卫

在main.js中添加

router.beforeEach((to,from,next)=>{
  //to表示要去的新页面
  //from表示旧页面
  //next表示是否放行
  next()
})

next参数表示是否放行，不管有没有进行守卫判断都需要放行，否则会整体拦截页面

router.beforeEach → 开启路由守卫

创建三个组件

login.vue

<template>
    <div>
        <h1>
            登录页面
        </h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

detail.vue

<template>
    <div>
        <h1>
            详情页面
        </h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

cart.vue

<template>
    <div>
        <h1>
            购物车页面
        </h1>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

HelloWorld组件中的视图层：

路由匹配规则

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import detail from '@/components/detail'
import cart from '@/components/cart'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name:'login',
      component:login
    },
    {
      path: '/detail',
      name:'detail',
      component:detail
    },
    {
      path: '/cart',
      name:'cart',
      component:cart,
      meta:{
        needAuth:true
      }
    }
  ]
})

进入购物车组件需要进行路由判断，meta属性就是用来判断是否需要守卫

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false


//全局过滤器
Vue.filter('toFixed1',function(val,data){
  return val.toFixed(data)
})


router.beforeEach((to,from,next)=>{
  //to表示要去的新页面
  //from表示旧页面
  //next表示是否放行
  var islogin = 0  //0表示未登录，1表示已登录
  if(to.meta.needAuth){
    if(islogin==0){
      router.push({name:'login'})
    }
    if(islogin==1){
      next() //放行
    }
  }
  else{  
    next()
  }

})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

运行效果

可以看到，详情页面可以直接访问，但是点击“购物车”时，因为islogin为0，则会跳转到登录界面

7.10.2 组件内路由守卫

新建订单组件order.vue

<template>
    <div>
        <h1>
            订单组件
        </h1>
    </div>
</template>
<script>
export default {
    beforeRouteEnter:(to,from,next)=>{
        var islogin=0
        if(islogin==0){
            next({name:'cart'})
        }else{            
             next()

        }
    }
    
}
</script>
<style scoped>

</style>

HelloWorld视图层：

路由匹配规则

组件内守卫不需要meta属性

运行效果

这个结果也很好理解，首先因为islogin为0，会想跳转到购物车，但是购物车有全局守卫，所以直接跳到了登录组件。

7.10.3 离开组件时守卫

举个栗子：想从订单组件跳转回helloworld

order.vue

<template>
    <div>
        <h1>
            订单组件
        </h1>
    </div>
</template>
<script>
export default {
    beforeRouteEnter:(to,from,next)=>{
        var islogin=1
        if(islogin==1){
            next()
        }else{            
             next({ name: 'login' })

        }
    },

    beforeRouteLeave:(to,from,next)=>{
        if(confirm('是否离开？')==true){
            next()
        }else{
            next(false)
        }
    }
}
</script>
<style scoped>

</style>

运行效果

OK。