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.pa...
一、$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: '<App/>'
})
在使用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(),告诉路由守卫,这种情况的继续执行,而不至于停留。
更多推荐
所有评论(0)