什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。
web中，路由的概念也是类似，根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目，vue.js本身就可以通过组合组件来组成应用程序；当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使用渲染。
其所包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
1、基础路由
当我们通过 vue create 创建项目的的时候，会选择是否安装vue-router,项目创建后，在主组件App.vue中的HTML部分：
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
上述代码中，<router-view/>是路由出口，路由匹配到的组件将渲染在这里。
2、在router/index.js文件中
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } // 2. 定义路由每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。 const routes = [ { path: '/foo', component: Foo }, ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes }) // 4. 创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app')
3、动态路由
什么是动态路由？动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。
1、在vue项目中，使用vue-router如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子如下：
export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'HelloWorld', component: HelloWorld }, { path: '/RouterComponents/:id', name: 'RouterComponents', component: RouterComponents } ] })
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
2、路由跳转，执行方式有两大类；
第一大类：router-link模式，直接把参数写在to属性里面：
<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>
第二大类：$router.push()模式，代码如下：
methods: { changeFuc (val) { this.$router.push({ name: 'RouterComponents', params: {id: val} }) } }
或者：
methods: { changeFuc (val) { this.$router.push({ path: `/RouterComponents/${val}`, }) } }
4、路由嵌套
vue项目中，界面通常由多个嵌套的组件构成；同理，URL中的动态路由也可以按照某种结构对应嵌套的各层组件：
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] })
5、捕获所有路由或404 NotFound路由
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：
{ // 会匹配所有路径 path: '*' } { // 会匹配以 `/user-` 开头的任意路径 path: '/user-*' }