关于vue-router的介绍，我们就不详细说明。官方文档中有十分详细的说明文档。

本文将讲述关于以下几点我们常用的情景描述及解决方法：

1. 动态路由匹配

2. 编程式导航和声明式导航

3. HTML5 History 模式

一、动态路由匹配是什么？在什么情况下使用？如何使用？

看到上面的提问，你脑海中是否有对应的答案了呢？

话不多少，我们直接来一个开发中遇到的实例讲解吧！网站建设中，新闻模块对于大多数网站来说都是一个必不可少的模块。那么每篇新闻你所给出的路径是什么样的？

无论怎么样你都需要传递一个特定的信息给后台，让后台根据你传递的特定信息来查找出对应的新闻。而这个特定信息对于大多数而言都是数据库中的id

比如：

格式1：http://cbitq.com/news/id/1
格式2：http://cbitq.com/news.html?id=1

他们最终的返回的结果都是去后台id为1的那篇新闻给找出来，当然这里的id也可以是test或别的任何自定义名称。

无论用那种方法，他们最终的宗旨都是传递一个特定的参数去后台，后台根据这个特定的参数查找出对应的内容。

那么在vue-router中我么是如何进行参数的传递呢？

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

二、编程式导航和声明式导航

声明式导航

<router-link to="/foo">Go to Foo</router-link>

编程式导航

router.push("/foo")

看到上面两个导航的代码，你是否已经明白了？

<router-link :to="..."> 等同于调用 router.push(...)

编程式导航也就解决了，在开发中如果我们并不想用声明式进行导航处理，但又需要在点击某个按钮后，需要进行跳转。

三、HTML5 History 模式

vue-router 默认 hash 模式，即在路径上会多个#

hash模式：
history模式： http://localhost:8080/home/

我们最常见的事第二种history模式，vue-router中我们要如何设置呢？

const router = new VueRouter({
  mode: 'history',//增加这一句
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/news/:id', component: User }
  ]})

到这里还需要后台配合才能正确使用history模式，关于具体配置，大家可以去vue-router官网查看。

官网地址：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90