发表于: 2019-03-23 23:45:11
1 482
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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。
主要是因为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 (可在跳转的页面取得所传递的值);
明天计划的事情:(一定要写非常细致的内容)
完成课程详情页
遇到的问题:(遇到什么困难,怎么解决的)
收获:(通过今天的学习,学到了什么知识)
路由拦截无限循环
评论