3-编程式导航 & 命名路由

编程式的导航

借助 router 的实例方法，通过编写代码来实现

router.push()

  router.push( location, onComplete?, onAbort? )
  导航到不同的 URL，向 history 栈添加新记录，点击后退按钮，回到之前 URL
  点击 <router-link :to="..."> 等同于调用 router.push(...)

声明式

<router-link :to="…"’>
to: 参数可以是字符串路径，或者描述地址的对象

/* 字符串 */
router.push( 'home' )

/* 对象 */
router.push({ path: 'home' })

/* 命名的路由 */
router.push({ name: 'user', params: { userId: '123' }})

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

如果提供了 path，params 会被忽略，同样的规则也适用于 router-link 组件的 to 属性

  /* 这里的 params 不生效 */
  const userId = '123'
  router.push({ path: '/user', params: { userId }})
  console.log( this.$router.path ) -> '/user'

  /* params生效需要提供路由的 name 或带有参数的 path */
  const userId = '123'
  router.push({ name: 'user', params: { userId }})
  console.log( this.$router.params ) -> '/user/123'

  router.push({ path: `/user/${userId}` })
  console.log( this.$router.params ) -> /user/123

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

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，
需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace()

  router.replace(location, onComplete?, onAbort?)
  不会向 history 添加新记录，而是替换掉当前的 history 记录

router.go( n )
n: 是一个整数，在 history 记录中向前或者后退多少步

  router.go(1)  /* 前进一步 */
  router.go(-1) /* 后退一步 */

命名路由

创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

  const router = new VueRouter({
    routes: [
      {
        path: '/user/:userId',
        name: 'user',
        component: User
      }
    ]
  })

链接到命名路由，给 router-link 的 to 属性传一个对象

  /* 等价于 router.push() */
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<router-link’>: 具有路由功能的导航 (点击)**

<router-link’> Props

to:
type: String | Location ( 必填 )
目标路由的连接(默认a标签)，内部会立刻把 to 值传到 router.push()

  /* string */
  <router-link to="home">Home</router-link>

  /* v-bind JS 表达式 */
  <router-link v-bind:to="{ path: 'home' }">Home</router-link>

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

  /* 带参数: /register?plan=private */
  <router-link :to="{ path: 'register', query: { plan: 'private' }}"></router-link>

replace:
type: Boolean ( 默认 false )
设置 replace 时，会调用 router.replace()，导航后不会留下 history 记录

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

append:
type: Boolean ( 默认 false )
设置 append 后，在当前路径前添加基路径

  /* 例如：从 /a 导航到一个相对路径 b, 如果配 append，则为 /a/b */
  <'router-link :to="{ path: 'relative/path'}" append></router-link'>

tag:
type: String (默认 “a” )
使 渲染成指定标签

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

exact
type: boolean ( 默认 false )
"是否激活"默认类名( 精确匹配 )

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

active-class:

  type: String ( 默认 "router-link-active" )
  设置链接激活时使用的 CSS 类名。可通过 linkActiveClass 来全局配置

event：
type: String | Array ( 默认 “click” )
声明用来触发导航的事件。可以是字符串或包含字符串的数组

exact-active-class:
type: String ( 默认 “router-link-exact-active” )
链接被精确匹配时候激活 class。默认值可以通过路由构造函数选项 linkExactActiveClass 全局配置