脚本宝典收集整理的这篇文章主要介绍了vue-router 笔记整理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
watch可以监听,或者beforeRouteUpdate 钩子函数监听。用途?
用途:如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个
/users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取
用户信息)。
路由模式(history、
hash 和 abstract)路由的push等同window.history.pushState(一个状态对象,
title, url)
使用props 将组件和路由解耦
路由守卫(钩子函数
全局的,单个路由独享的, 组件级的
全局:router.beforeEach(to, from, next)异步解析 状态有“等待中”,“确定的”
router.afterEach(to, from)
路由独享钩子:beforeEnter(to, from, next) 用法同全局的
router.beforeEach()
组件级:
beforeRouteEnter(to,from, next)
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 this
// 因为当守卫执行前,组件实例还没被创建
beforeRouteUpdate(to,from, next)
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之
间
//跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下
被调用。
// 可以访问组件实例 `this`
beforeRouteLeave(to,from, next )
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
beforeRouteLeave 这个钩子函数很有用,顾名思义,导航离开该组件对应的路由调用,可以做一些
离开时候的comfirm判断,比如有重要的信息需要用户保存后才能进行跳转、存储session、清除定
时器等。
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
参考文献
以上是脚本宝典为你收集整理的vue-router 笔记整理全部内容,希望文章能够帮你解决vue-router 笔记整理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。