五分钟速通vue中的路由守卫用法代码

路由守卫是当路由跳转，更新，离开时我们需要一系列操作的时候使用

全局路由守卫
在路由根文件组件中

//在路由根文件组件中  
import Vue from 'vue'
import VueRouter from 'vue-router'

//这行代码如果注释掉，this上面都不存在$router与$route的api了
Vue.use(VueRouter)  

//引入Films组件
import Films from "@/views/Films"
// import Cinema from "@/views/Cinema"
import Center from "@/views/Center"
import Nowplaying from "@/views/films/Nowplaying"
import Comingsoon from "@/views/films/Comingsoon"
import Error from "@/views/Error"
import Detail from "@/views/Detail"


const routes = [
  {
    path:"/films",
    component:Films,
    //进行二级路由的配置
    children:[
      {
        path:"/films/nowplaying",
        component:Nowplaying,
      },
      {
        path:"/films/comingsoon",
        component:Comingsoon
      },
      {
        path:"",
        redirect:"/films/nowplaying"  //进行一级路由内部的重定向操作  /films ==> /films/nowplaying
      }
    ]
  },
  // {
  //   path:"/films/Nowplaying",
  //   component:Nowplaying
  // },
  {   
    path:"/cinema",
      component:()=>import(/* webpackChunkName:'cinema' */"@/views/Cinema")   //webpack的代码分割？
    // component: resolve => require(['@/views/Cinema'], resolve)
  },
  {
    path:"/center",
    component:Center,
    // beforeEnter(to,from,next){
    //   console.log("进入Center了哦....")
    //   next()
    // }
  },
  {
    name:"detail",
    path:"/detail/:id",
    component:Detail,
    props:true
  },
  {
    path:"/login",
    component:()=>import("@/views/Login")
  },
  {
    path:"/",
    redirect:'/films'  //重定向  / ==> /films ===> /fimls/nowplaying
  },
  {
    path:"*",
    component:Error   //前面的路由都没有匹配上的话，就需要显示Error页面了
  }
]

const router = new VueRouter({
  mode:"hash",//默认采用hash模式
  routes
})

//全局路由守卫
//全局路由的前置守卫
//to:Route  即将要进入的目标
//from:Route 当前导航正要离开的路由
/* router.beforeEach((to,from,next)=>{
  if(from.path==="/cinema"){
    console.log("从影院这边过来的哦...")
  }
  next() //一定需要调用next
}) */


//全局的后置路由守卫
/* router.afterEach((to,from)=>{
  if(to.path === "/center"){
    console.log("进入center了哦...")
  }
}) */



//判断每次路由切换的时候，是否有token令牌
router.beforeEach((to,from,next)=>{
  if(to.path === "/center"){
    if(localStorage.getItem("token")){//说明用户已经登录了
      next()
    }else{
      next("/login") //如果用户没有登录直接跳转到登录界面进行用户登录
    }
  }else{
    next()
  }
})




export default router

单个路由钩子：
只有beforeEnter，在进入前执行，to参数就是当前路由

routes: [
    {
      path: '/foo',
      component: Foo,
      //当进入到foo路由之前，就会触发
      beforeEnter: (to, from, next) => {
        // ...
        next() //必须要执行next之后，对应的Foo组件才可以正常显示出来
      }
    }
  ]

路由组件钩子：
这个路由组件钩子需要在组件中使用，

//进入到某个组件之前的拦截，获取不到组件内部的this
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用     
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  
  //离开某个组件之前的拦截，获取到组件内部的this
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

组件钩子举例
在某组件中

<template>
    <div class="center">
        center...
    </div>
</template>

<script>
export default {
    //进入Center之前
    /* beforeRouteEnter(to,from,next){
        console.log("Center---beforeRouteEnter...",this)
        next()
    }, */

    //从Center离开的时候
    /* beforeRouteLeave(to,from,next){
        console.log("Center-beforeRouteLeave",this)
        next()
    } */



    /* beforeRouteEnter(to,from,next){
        if(localStorage.getItem("token")){//说明用户已经登录了
            next()
        }else{
            next("/login") //如果用户没有登录直接跳转到登录界面进行用户登录
        }
    } */

}
</script>

<style>

</style>