Vue路由守卫
路由守卫常用在登录页面跳转前的验证，判断是否登陆，登录显示个人中心页面，没登录则显示登录页面，这在网页上也是很常见的操作。
总的来说，是当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化。
路由守卫有三种使用的方式：全局路由守卫、局部路由守卫（单个路由守卫和组件内路由守卫）。

1.全局路由守卫

全局路由守卫有两个钩子函数：beforeEach前置路由守卫和afterEach后置路由守卫。
若用Vue-cli脚手架，在路由的配置文件里配置全局路由守卫。
守卫方法接收三个参数：

to：即将要进入的目标路由对象

from：当前导航正要离开的路由

next：执行下一步（全局的afterEach不需要next）
//全局的前置路由守卫
router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
    if(to.path === "/cinema"){
 	 console.log("进入cinema就执行")
  }
  if(from.path === "/cinema"){
 	 console.log("从cinema跳出来后执行")
  }
  next()   //必须要执行
})

//全局的后置路由守卫（少用）
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('参数不需要next，已经进入了就不需要放行了')
})

2-1.局部路由守卫（单个路由守卫）

若用Vue-cli脚手架，在路由的配置文件里配置，设置在被守卫的路由路径里，beforeEnter进入到路由之前。
 routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        console.log("进入到foo哦...")
      }
    }
  ]

2-2.局部路由守卫（组件内路由守卫）

beforeRouteEnter还没进到组件之前，啥也没有beforeRouteUpdate用于跳转到带有动态参数的路径切换时

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

vue路由守卫
vue路由守卫分为：全局的，单个路由独享的，组件级的vue官方文档
回调函数参数
to：进入到哪个路由去，

from：从哪个路由离开，

next：函数，决定是否展示你要看到的路由页面

next({ name: ‘home’… } 或者 next({ path: ‘/’ }) 跳转一个不同的地址

next(false): 中断当前导航

全局守卫

全局前置守卫：router.beforeEach((to, from, next) => { })
全局解析守卫：router.beforeResolve((to, from, next) => { })
全局后置钩子：router.afterEach((to, from) => { })

1、router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

2、注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
组件中使用路由守卫

beforeRouteEnter： 进入路由前的处理
beforeRouteUpdate：$route对象发生变化
beforeRouteLeave：离开路由前处理

const Foo = {
  	template: `...`,
  	beforeRouteEnter (to, from, next) {
	  	// 在渲染该组件的对应路由被 confirm 前调用
	    // 不！能！获取组件实例 `this` 使用vm
	    // 因为当守卫执行前，组件实例还没被创建
	    next(vm => {
          if(from.query.isManager === '0'){
            next(false)
            vm.$router.replace({name: 'memberInfo', query: {agentCode:res.code,routerFrom: from.name}
          }
      	})
	  },
	  beforeRouteUpdate (to, from, next) {
	    // 在当前路由改变，但是该组件被复用时调用
	    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
	    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	    // 可以访问组件实例 `this`
	  },
	beforeRouteLeave(to,from,next){
      Dialog.closeAll()
      if(to.name=='policyList'){
        let content ='返回后当前页面内容无法保存,确定返回吗？'
        Dialog.confirm({
          title: '',
          content: content,
          confirmText: '确定',
          onConfirm: () => next(),
          onCancel:()=> next(false),
        })
      }else{
        next()
      }
    },

路由独享守卫
在路由中直接配置 beforeEnter
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        next({name: 'home', query: {fid:'001'}}
      }
    }
  ]
})

vue-router
路由守卫
当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫

组件内守卫
路由独享守卫
全局守卫

组件内守卫
定义在组件内的与路由有关的生命周期函数（守卫）

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

beforeRouteEnter
当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate  之前），不能这里通过 this 访问组件实例，需要通过 next 回调来进行调用
beforeRouteEnter (to, from, next) {
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  	next(vm => {
      // vm...
    })
}

beforeRouteUpdate
在当前路由改变，但是该组件被复用时调用
beforeRouteUpdate (to, from, next) {
    // 可以访问组件实例 `this`
},

beforeRouteLeave
导航离开该组件的对应路由时调用
beforeRouteLeave (to, from, next) {
    // 可以访问组件实例 `this`
}

路由守卫参数
to
即将要进入的目标 路由对象（$route）
from
当前导航正要离开的路由对象（$route）
next
路由确认回调函数，类似 Promise 中的 resolve 函数，一定要确保调用 next 函数，但是后续的导航行为将依赖 next 方法的调用参数


next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)


next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址


next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航


路由独享的守卫
可以在路由配置上直接定义 beforeEnter 守卫，相对来说，应用不多
const router = new VueRouter(
  { 
    routes: [ 
      { 
        path: '/foo', 
        component: Foo, 
        beforeEnter: (to, from, next) => { 
          // ... 
      	}
    	} 
    ] 
  }
)

全局守卫
全局守卫是注册在 router 对象（new VueRouter({…})）上的

beforeEach
beforeResolve
afterEach

beforeEach
当一个导航触发时，全局前置守卫按照创建顺序调用
router.beforeEach((to, from, next) => {
  // ...
})

beforeResolve
在所有组件内守卫和异步路由组件被解析之后被调用
router.beforeResolve((to, from, next) => {
  // ...
})

afterEach
导航被确认后调用
router.afterEach((to, from) => {
  // ...
})


因为导航已经被确认，所以没有 next

序：通过路由守卫可以对每次刷新或者进入的路由界面进行权限验证，相当于VUE中的全局中间件。

1.全局守卫：router.beforeEach注册一个全局前置守卫。参考文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html。




注册
登录
主面板




router.js
Login.vue
DashBoard.vue


首先是DashBoard.vue的内容：
<template>
    <div>
        <h3>主面板</h3>
        <div id="nav">
            <router-link to="/dashboard/home">首页</router-link>
            <router-link to="/dashboard/about">关于我们</router-link>
            <router-link to="/dashboard/mine">我的</router-link>
        </div>
        <!--设置路由出口-->
        <router-view></router-view>
    </div>
</template>

然后是，Login.vue的内容：
<template>
    <div>
        <h2>登录界面</h2>
        <button @click="login">登录</button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        methods:{
            login(){
                //1.登录成功
                window.isLogin = true;
                //2.获取回调地址
                const redirect = this.$route.query.redirect;
                if(redirect){
                    //有回调地址
                    this.$router.push(redirect);
                }else {
                    //没有回调地址，去首页
                    this.$router.replace('/');
                }
            }
        }
    }
</script>

在router.js里面配置一个全局前置守卫：
//一级界面
import Login from "./views/Login";
import DashBoard from "./views/DashBoard";

//二级界面
import Home from "./views/Home";
import About from "./views/About";
import Mine from "./views/Mine";

编程式导航参考文档：https://router.vuejs.org/zh/guide/essentials/navigation.html。
const router =  new Router({
    routes:[
        {path:'/',redirect:'/dashboard'},
        {
            path: '/dashboard',
            name: 'dashboard',
            component: DashBoard,
            children:[
                {path:'/dashboard',redirect:'/dashboard/home'},
                {path:'home',name:'home',component:Home},
                {path:'about',name:'about',component:About},
                {path:'mine',name:'mine',component:Mine}
            ]
        },
        {path:'/login',name:'login',component:Login}
    ]
});

//全局路由前置守卫
router.beforeEach((to,from,next) => {
    console.log(to, from);
    if(to.path != '/login'){ //验证是否登录
        if(window.isLogin){  //已经登录
            next();          //放行
        }else {
            //next('/login?redirect='+to.path);  //去哪里！
            next('/login?redirect=/dashboard/mine');
        }
    }else{
        next();
    }
    next();//放行
});

//输出路由
export default router;

后置守卫：

参考文档地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%90%8E%E7%BD%AE%E9%92%A9%E5%AD%90。

在router.js中加上一句：
//全局后置路由
router.afterEach((to, from) => {
    console.log('来了！');
});

2.局部守卫：用法参照全局守卫；https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB–>参考文档。

1）路由内独享的守卫：你可以在路由配置上直接定义 beforeEnter 守卫。
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})


2）组件内常用的路由钩子选项：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB–>参考文档。

可以在路由组件内直接定义以下路由导航守卫： beforeRouteEnter；beforeRouteUpdate (2.2 新增)；beforeRouteLeave。（顺序是先全局再局部）。
<!--Mine.vue内定义的内容-->
<script>
    export default {
        name: "Mine",
        beforeRouteEnter(to,from,next){
            console.log('进入之前调用');
            next();
        },
        beforeRouteUpdate(to,from,next){
            console.log('路由参数变了！');
            next();
        },
        beforeRouteLeave(to,from,next){
            console.log('路由离开前调用');
            next();
        }
    }
</script>

3.路由懒加载：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

route.js里面对应代码改成如下这样：表名该组件用时再加载。
// import About from "./views/About";
const About = () => import("./views/About");

异步组件：按需加载，用到时加载。

3.<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。参考文档：https://router.vuejs.org/zh/api/#router-view。（不用经常加载的路由，使用他来包装）。

4.补充：

router.push(location, onComplete?, onAbort?)：想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。（相当于点击路由链接）。

router.replace(location, onComplete?, onAbort?):跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。（用新路由替换当前路由）。

router.back()：请求返回上一个记录路由。

router.go(+1)：请求返回下一个记录路由。

router.go(-1)：请求返回上一个记录路由。

5.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象。全局对象。

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象。