vue-router菜鸟进阶！（动态路由匹配VS编程式导航）

本文介绍了Vue Router中的动态路由匹配和编程式导航。动态路由允许使用动态路径参数来匹配不同ID的用户路由，参数值可以通过this.$route.params访问。路由参数的变化可以使用watch或beforeRouteUpdate守卫响应。高级匹配模式如可选参数和正则表达式也得到了提及。编程式导航主要包括router.push方法用于改变URL，类似于<router-link>的点击行为，而router.go(n)则用于历史记录的前后移动。

开篇废话：每天早上都要被自己迷倒～嘻嘻。最近状态超级好编程的状态也好了很多很多～前面我们已经看了vue.js基础，又看了webpack的知识还有简单的vue-router小实例。其实已经可以自己勉强写一些简单页面了。但是我偏不hhhhhh，虽然说实践出真知，但是我这种学院派还是偏爱看这官方文档跟着上面的实例走。野路子虽好，可不要走偏噢～ (;｀O´)o

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同一个组件。例如，有一个User组件，对于所有ID各不相同的用户，都要用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用【动态路径参数】
（dynamic segment）来达到这个效果：

const User = {
    template: '<div>User</div>
}

const router = new VueRouter({
    routes: [
        // 动态路径参数，以冒号开头
        { pathL '/user/:id', component: User }
    ]
})

（居然找到了当初写ng的感觉嘻嘻想想当初真的什么都不懂就上手也是蛮拼，能做一些事但是知其然不知其所以然)

现在呢，像/user/foo和/user.bar都将映射到相同的路由。

一个【路由参数】使用冒号：标记。当匹配到一个路由时，参数值会被设置到this.$route.params,可以在每个组件内使用。于是，我们更新User的模板，输出当前用户的ID:

const User = {
    template: '<div> User {{ $route.param.id }}</div>'
}

For example:

<!DOCTYPE html>
<html>
<head>
    <title>caojiali</title>

</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/cao/jiali">who's the lovely girl?</router-link>
    <router-link to="/cao/lovely">this is the answer</router-link>
  </p>
  <router-view></router-view>
</div>
</body>
</html>

<script>

const Cao = {
  template: `<div>Cao {{ $route.params.id }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/cao/:id', component: Cao }
  ]
})

const app = new Vue({ router }).$mount('#app')

</script>

可以在一个路由中设置多段【路径参数】，对应的值都会设置到 $route.param中。例如：
routeparam

影响路由参数的变化

当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，可以简单地watch（监测变化） $route对象：

const User = {
    template: '...',
    watch: {
        '$route' (to, form) {
            // 对路由变化作出响应...
        }
    }
}

或者使用2.2中引入的beforeRouteUpdate守卫：

const User = {
    template: '...',
    beforeRouteUpdate (to, from, next) {
        // react to route change...
        // don't forget to call next()
    }
}

高级匹配模式
vue-router使用path-to-regexp作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数，匹配零个或多个，一个或多个，甚至是自定义正则匹配。

<script src="https://unpkg.com/vue/dist/vue.js"</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"</script>

<div id="app">
    <p>
        <route-link to="/user/foo">/user/foo</route-link>
        <route-link to="/user/bar">/user/bar</route-link>
    </p>
</div>

const User = {
    template: '<div>User {{ $route.params.id }}</div>'
}

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

const app = new Vue({ router }}.$mount('#app')

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

编程式导航

除了使用< router-link >创建a标签来定义导航链接，还可以借助router的实例方法，通过编写代码实现。

router.push(location, onComplete?, onAbort?)

想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，则回到之前的URL.

当点击< router-link >时，这个方法会在内部调用，所以说，点击< router-link :to=”…”>等同于调用router.push(…)

声明式：< router-link :to=”…”>
编程式: router.push(…)

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)