Vue中$router，路由守卫beforeEach 的使用，以及 this.$router.push两种方式的区别

一、$router

在 Vue 实例内部，可以通过 $router 访问路由实例，即通过调用 this.$router.push进行连接跳转。

$router.push()传参的两种方式：

1、 this.$router.push({name:xx, params:{a:xx, b:xx}})//a, b是我们要传递给另一个页面的参数

       目标页面通过this.$route.params.a或this.$route.params.b来获取参数

2、this.$router.push({path:xx, query:{a:xx, b:xx}}) //a, b是我们要传递给另一个页面的参数

   目标页面通过this.$route.query.a或this.$route.query.b来获取参数

共同点：都能给跳转的目标页面传递参数

不同点：1、获取参数的方式不同     2、使用name-params的方式传递，参数不会显示到地址栏，而path-query则会，这个区别类似于post与get。

下图是login页面使用name-params传递参数：注意地址栏

下图是login页面使用path-query传递参数：注意地址栏

使用场景总结：name-params 可用于私密性有要求的情况，path-query则可以用于需要在地址栏显示参数的情况

官网有详细的用法解释. 链接：编程式的导航

 二、beforeEach的使用

使用场景： 一般用在跳转前需要做校验的地方，如：进入首页前做登录校验，如果已登录则跳转首页，否则跳转登录页。

使用的地方：

 如果是做跳转首页前做登录校验，需要写在main.js文件中，表示在所有路由被访问之前做校验；

import Vue from 'vue'
import App from './App'
import router from './router'
import config from './util/config'
import axios from 'axios'
import Cookies from 'js-cookie'
import iView from 'iview';
import 'iview/dist/styles/iview.css';


import Home from './components/Home'
import Login from './components/login/login'

Vue.use(iView);

Vue.config.productionTip = false;
Vue.prototype.baseUrl = config.baseUrl;
Vue.prototype.$http = axios;
Vue.prototype.Cookies = Cookies;  

//路由跳转前做判断
router.beforeEach((to, from, next) => {
  let hasLogin = Cookies.get('hasLogin'); //从cookies中获取是否已登陆过的信息
  if(hasLogin){
    next()
  }else{
    if(to.path == '/login'){
      next()
    }else{
      next({
        replace:true,
        name:'login',
      })
    }
  }
})


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

在使用beforeEach中，会遇到两个问题：

1、访问指定页面出现无法加载的情况（也就是空白）

2、访问指定页面，出现无限循环的问题

问题代码如下：

router.beforeEach((to, from, next)=>{
  if(hasLogin){ //如果已经登录，则直接跳转
    next();
  }else if(to.name === 'Home'){ //如果未跳转，且访问的是首页，则重定向到登录页
    next({
      replace:false,
      name:'login'
    })
  }
})

这么写代码会有个问题，那就是当hasLogin为false时，访问任意页面都会出现空白，这是因为：

• next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach()
• next('login') 表示路由拦截成功，重定向至login，会再次调用router.beforeEach()

也就是说beforeEach()必须调用next(),否则就会出现无限循环，next() 和 next('xxx') 是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！

 官网相关说明：前置全局守卫

解决方法：

router.beforeEach((to, from, next)=>{
  if(hasLogin){ //如果已经登录，则直接跳转
    next();
  }else if(to.name === 'Home'){ //如果未跳转，且访问的是首页，则重定向到登录页
    next({
      replace:false,
      name:'login'
    })
  }else{
    next() //新增这一句
  }
})

/*
理解：
当调用完next({name:'login'})，再次调用router.beforeEach()时，此时的to.name可能已经不在router.beforeEach()的条件判断中了，因此需要加上next()，告诉路由守卫，这种情况的继续执行，而不至于停留。

*/

理解：
当调用完next({name:'login'})，再次调用router.beforeEach()时，此时的to.name可能已经不在router.beforeEach()的条件判断中了，因此需要加上next()，告诉路由守卫，这种情况的继续执行，而不至于停留。