温故而知新之Vue Router API

Vue Router API

解析顺序

页面A 跳转到页面 B
A的beforeRouteLeave=>main.js中全局beforeEach=>router.js中路由beforeEnter=>B页面中的beforeRouteEnter=>main.js中全局afterEach=>B页面中的beforeRouteEnter中next()中的操作，vm生成了

beforeRouteEnter(to, from, next){
  next(vm=>{
    // 全局afterEach后生成 vm
  })
}

<link> 的props

replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

<router-link :to="{path: '/abc'}" replace></router-link>

append

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

active-class

默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

exact

精准匹配

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>

exact-active-class

默认值: "router-link-exact-active"
配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

<router-view>

可以嵌套

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

<router-view> 的props

name

Router

mode

默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
可选值: "hash" | "history" | "abstract"

base

默认值: "/"
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

scrollBehavior

fallback

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。

router.push

router.replace

router.go

router.back

router.forward

router.onError(callback)

路由对象

• $route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"
• $route.params
• $route.query
• $route.hash
• $route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。
• $route.matched 一个数组，包含当前路由的所有嵌套路径片段的路由记录
• $.route.redirectedForm 重定向来源的路由名称

this.$router router实例

this.$route 路由对象