- 组件内使用路由
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、清除定
时器等。- 路由元信息:
可以配置 meta 字段,通常用来做是否需要登录的判断
meta: { requiresAuth: true } - 路由的过渡:
设置不同的 name 比如name=fade - 数据获取:(比较陌生,后续着重看)
导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
- 滚动行为
这个功能只在支持 history.pushState 的浏览器中可用
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
- 路由懒加载
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载参考文献
- vue-router 中文官方文档