Vue-Router 3.x

路由基础

路由作用：根据不同的路径映射到不同的视图。

监听复用组件路由参数变化：watch (监测变化) $route 对象。

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

配置 routes 常用参数：
- 路由路径：path 参数。
- 动态路由匹配：一个“路径参数”使用冒号 : 标记。如： { path: '/user/:id', component: User }
- 路由组件传参：使用 props 将组件和路由解耦。
- 路由命名： name 参数。
- 组件： component 参数。
- 嵌套组件：children 参数。
- 重定向：redirect 参数。
- 别名：alias 参数。
- 元信息：meta 参数。
内置组件：
- 视图切换：<router-link> 组件
- 视图渲染：<router-view> 组件
导航守卫：
- 全局守卫：
  - 全局前置守卫：router.beforeEach，导航触发时，全局前置守卫按照创建顺序调用。
  - 全局解析守卫：router.beforeResolve，导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
  - 全局后置守卫：router.afterEach。
- 路由独享守卫：beforeEnter。单个路由独享的钩子函数，它是在路由配置上直接进行定义的。
- 组件内守卫：它们是直接在路由组件内部直接进行定义的。
  - beforeRouteEnter
  - beforeRouteUpdate
  - beforeRouteLeave
导航解析流程
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
路由对象：
- this.$router：router 的 Vue 根实例。是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
- this.$route：当前激活的路由信息对象。每一个路由都会有一个 route 对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
  - 里面的属性是 immutable (不可变) 的，通过 watch 监测变化
  - 它包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
  - 每次成功的导航后都会产生一个新的对象。
  - 路由对象出现在多个地方:
    - 在组件内，即 this.$route
    - 在 $route 观察者回调内
    - router.match(location) 的返回值
路由懒加载：
- 将异步组件定义为返回一个 Promise 的工厂函数
- 在 Webpack 2 中，我们可以使用动态 import (opens new window)语法来定义代码分块点
- 注释语法来提供 chunk name : webpackChunkName

路由传参：使用 router.push()切换路由。

params 传参：

只能使用 name，不能使用 path；如果提供了 path，params 会被忽略

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

参数不会显示在路径上

浏览器强制刷新参数会被清空

// 传递参数
this.$router.push({
  name: Home,
  params: {
      test: 'hello'
  }
})
router.push({ name: 'user', params: { userId:123 }}) // -> /user/123
// 接收参数
const p = this.$route.params

query 传参：带查询参数。

参数会显示在路径上，刷新不会被清空

name 可以使用 path 路径

// 传递参数
this.$router.push({
  	name: Home,
  	query: {
		test:"hello"
	}
})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 接收参数
const q = this.$route.query

SewenAbout 19 min