vue 编程式导航与动态路由匹配

编程式导航

页面导航具有两种方式，

• 第一种方式为声明式导航，就是通过 <a> 标签或者 <router-link> 标签，点击链接进行页面的跳转
• 第二种方式为编程式导航，通过调用 JavaScript 的 API 实现页面的跳转。例如通过 location.href。

Vue 中常见的编程式导航 API 如下：

• this.$router.push()：跳转到形参中的 hash 地址
• this.$router.go()：参数为正时，与前进按钮相同；参数为负时，与后退按钮相同。

如下代码所示：

HTML

<div class="container">
  <!-- 添加路由链接 -->
  <router-link to="/index">点击访问首页</router-link>
  <router-link to="/list">点击访问列表</router-link>
  <router-link to="/info"></router-link>
  <!-- 添加路由填充位 -->
  <router-view></router-view>
</div>

路由组件

// 定义路由组件
const index = {
  template: `<div>
    <h1>这是 index 组件</h1>
    <button @click='jump'>跳转至 info 组件</but
  </div>`,
  methods: {
    // 跳转至info
    jump() {
      this.$router.push('/info')
    }
  },
}
const list = {
  template: `<h1>这是 list 组件</h1>`
}
const info = {
  template: `<div>
    <h1>这里记载着用户信息</h1>
    <button @click='back'>go back</button>
  </div>`,
  methods: {
    back() {
      this.$router.go(-1)
    }
  },
}

路由对象

// 配置路由规则，创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/index', component: index },
    { path: '/list', component: list },
    { path: '/info', component: info }
  ]
})

结果：

动态路由匹配

如果路由具有规律性，并且相似度很高时，推荐使用动态路由匹配，可以使代码的复用性变高。如下url 地址：

/user/foo/profile/1
/user/foo/profile/2
/user/foo/profile/3
/user/foo/profile/4

对于上面路径来说分别编写路由组件时非常难受的一件事，虽然有 CV 大法，但是谁不想装个 B 呢？

如果要使用动态路由匹配可以参考如下例子：

/user/foo/profile/:id

后面这个 :id 类似 nodejs 获取 Restful 形式 url 的方法。可以根据后面值的不同来进行匹配，
可以在模板中使用 $route.params.id 来显示后面不同的结果。

如下代码所示：

// 定义路由组件
const index = {
  template: `<h1>这是 index 组件</h1>`
}
const list = {
  template: `<h1>欢迎来到列表 {{ $route.params.id }}</h1>`
}

// 配置路由规则，创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/index', component: index },
    { path: '/list/:id', component: list }
  ]
})
let vm = new Vue({
  el: '.container',
  router
})

HTML

<div class="container">
  <!-- 添加路由链接-->
  <router-link to="/index">点击访问首页</router-link>
  <router-link to="/list/1">列表1</router-link>
  <router-link to="/list/2">列表2</router-link>
  <router-link to="/list/3">列表3</router-link>
  <router-link to="/list/4">列表4</router-link>
  <router-view></router-view>
</div>

结果：