vue路由——基础篇（五）

上一篇内容我们主要了解了命名路由等知识，这篇博客继续讲解路由的知识点，主要讲解编程式的导航和History 模式用法。

编程式的导航

在 Vue Router 中，除了使用<router-link>组件来创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。具体语法：router.push(location, onComplete?, onAbort?)，在 Vue 实例中可以调用 this.$router.push来执行。

语法中参数的具体含义：

1. location：可以是一个字符串路径，或者一个描述一个地址的对象；
2. onComplete和onAbort：都是回调函数，表明在导航成功完成（所有的钩子被解析之后）和终止的时候分别调用。

router.push()方法会想 history 栈添加一个新的记录，所有当点击浏览器回退按钮时，将回到之前的URL。当使用<router-link>组件时 ，也是调用router.push()方法，这两种方法本质上没有任何区别。

// 字符串
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会被忽略。如果想要/book/:id这种形式的路径，可以通过下列两种方式：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

除了可以使用router.push()方法，还可以使用router.replace()方法，它跟 router.push() 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。会在URL 中使用#来标识要跳转的目标。这种模式比较难看，那么我们可以使用 History 模式。具体的通过Router 构建选项 mode选项配置

const router = new VueRouter({
    mode: 'history',
    routes
})

路由组件传参

在讲解动态路由匹配的时候，我们曾经讲解过几种得到参数的方式，但是在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。所以还有另外的传递参数的方式，我们去了解一下如何使用 props传递参数，在 Router 构建对象的routes选项中，有一个props选项。

props选项用于参数传递，它的值有三种类型，分别是boolean、Object和Function。

布尔模式

如果props 被设置为 true，route.params 将会被设置为组件属性，并且route.params 中的数据不会清空

routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

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

函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
    { path: '/user', component: User, props:(route) => ({ query: route.query.q })  }
  ]
})