发表于: 2019-03-23 23:45:11

1 480


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

完成了路由拦截

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

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

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

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

    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

/路由拦截
router.beforeEach((tofromnext=> {
console.log(to);
console.log(from);
let path = ['/welcome''/login''/register''/retrieve''/userProtocol''/information'];
//获取login状态
let isLogin = store.state.isLogin;
//首次登陆过渡动画跳转
if (!isLogin && to.path === '/') {
next();
return;
}
//登录判断
if (!isLogin) {
if (path.indexOf(to.path) < 0 && path.indexOf(from.path) < 0) {
Message(
{
message: '用户账户已过期,请重新登录',
type: "warning",
duration: 3000,
algin: "center"
}
)
return next({
path: '/welcome'
})
else {
next()
}
else {
if (to.path === '/welcome') {
return next({
path: "/home"
});
};
next();
};
})

主要是因为next()跳转时,会进行再次判断,然后进入无限循环拦截导致路由失效

通过加入白名单,将不需要拦截的路由添加到数组,对其进行判断。

点击按钮,跳转到任意页面(传参)

声明式:<router-link :to="{name:'index',query:{id:'xxx',name:'xxx'}}">

编程式:router.push(...)

方法一:this.$router.push({path:'xxx',query:{aa:xx, bb: xx}});   //带查询参数,类似于 “?” 的形式传值

方法二:this.$router.push({path:'xxx',params:{aa:xx, bb: xx}}); 

注:以上两种方法的query跳转路径也可以写成name:'组件名'的形式

在query中放入需要传递的参数即可,多个参数之间用逗号隔开;

取值:this.$route.query.xx   (可在跳转的页面取得所传递的值);



明天计划的事情:(一定要写非常细致的内容) 

完成课程详情页
遇到的问题:(遇到什么困难,怎么解决的) 
收获:(通过今天的学习,学到了什么知识)

路由拦截无限循环




返回列表 返回列表
评论

    分享到