链接（跳转）<router-link> 和 路由实例Router

• <router-link>和<router-link>传入的对象参数中包含path路径、name命名路由、params路径参数、query ？查询，并且如果提供了 path，params 会被忽略

<router-link>

• <router-link> 比起写死的 <a href="..."> 会好一些

  • 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
  • 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。（<a href='...'>会导致页面重新加载）
  • 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。（base是初始化时传入的基路径配置）
  • 虽然表现下它默认渲染为<a>标签，但是本质上是通过click事件执行JS语句跳转。

• 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active（部分匹配）和.router-link-exact-active（完全匹配），可以通过初始化传参修改class属性值

• 将激活 class 应用在外层元素。在这种情况下，<a> 将作为真实的链接 (它会获得正确的 href 的)，而 "激活时的CSS类名" 则设置到外层的 <li>

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

to表示目标路由的链接

• 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。点击 <router-link :to="..."> 等同于调用 router.push(...)
• 字符串如果没有/开头，默认从根目录开始。提供append属性可以从当前目录开始

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a> 和 <a href="/home">Home</a>一样效果

<router-link :to="{ path: 'home' }">Home</router-link>    // （如果提供了 path，params 会被忽略）

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

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>

tag渲染标签

• 有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class前匹配激活class

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

exact完全匹配

• 路由默认会为当级及所有匹配的父级添加激活时的CSS类名（部分匹配），可以添加这个特性来限制当前路由只能在完全匹配时添加class（部分匹配class值）。

<router-link to="/">/</router-link>    // 1
<router-link to="/" exact>/ (exact match)</router-link>    // 2

<router-link to="/users">/users</router-link>    // 当前路由被激活时，1会被添加class，但是2不会

event导航触发事件

• 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值: 'click'

exact-active-class完全匹配激活class

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

------------------------------------------------------------------------------------------------------------------

Router 实例方法

• Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致
• 通过 this.$router 访问路由器

// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

router.push

• 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
• router.push该方法的参数可以是一个字符串路径，或者一个描述地址的对象

// 同样的规则也适用于 router-link 组件的 to 属性
router.push('home')

// 对象
router.push({ path: 'home' })    // （如果提供了 path，params 会被忽略）

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

• 在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

router.replace

• router.replace(location, onComplete?, onAbort?)它不会向 history 添加新记录。它的声明式<router-link :to="..." replace>
• 在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

router.go

router.go(n)

router.back

router.forward 向前

router.getMatchedComponents

• 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例？)。通常在服务端渲染的数据预加载时时候。

router.getMatchedComponents(location?)

router.resolve ?

• 解析目标位置 (格式和 <router-link> 的 to prop 一样)
  • current 是当前默认的路由 (通常你不需要改变它)
  • append 允许你在 current 路由上附加路径 (如同 router-link)

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)

router.addRoutes

• 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

router.addRoutes(routes: Array<RouteConfig>)

router.onReady

• 该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子（守卫）和路由初始化相关联的异步组件。
• 这可以有效确保服务端渲染时服务端和客户端输出的一致。
• 第二个参数 errorCallback 只在 2.4+ 支持。它会在初始化路由解析运行出错 (比如解析一个异步组件失败) 时被调用。

router.onError

• 注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：
  • 错误在一个路由守卫函数中被同步抛出；
  • 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
  • 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

------------------------------------------------------------------------------------------------------------------

Router 实例属性

router.match

• 返回路由对象，参数为必须

router.match(location)

router.app

• 配置了 router 的 Vue 根实例

router.mode

• 路由使用的模式。

router.currentRoute

• 当前路由对应的路由对象。