什么是路由？网络原理中，路由指的是根据上一接口的数据包中的 IP 地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。web 中，路由的概念也是类似，根据 URL 来将请求分配到指定的一个 ’ 端 ’。(即根据网址找到能处理这个 URL 的程序或模块)使用 vue.js 构建项目，vue.js 本身就可以通过组合组件来组成应用程序；当引入 vue-router 后，我们需要处理的是将组件 (components) 映射到路由(routes)，然后在需要的地方进行使用渲染。
一、基础路由
1、创建 vue 项目，执行 vue init webpack projectName 命令，默认安装 vue-router。项目创建后，在主组件 App.vue 中的 HTML 部分：
<template>
<div id=”app”>
<router-view/>
</div>
</template>
上述代码中，<router-view/> 是路由出口，路由匹配到的组件将渲染在这里。
2、文件 router/index.js 中：
import Vue from ‘vue’ // 导入 vue 插件
import Router from ‘vue-router’ // 导入 vue-router
import HelloWorld from ‘@/components/HelloWorld’ // 导入 HelloWorld 组件
Vue.use(Router) // 引入 vue-router
export default new Router({
routes: [
{
path: ‘/’, // 匹配路由的根路径
name: ‘HelloWorld’,
component: HelloWorld
}
]
})
以上代码比较简单，一般的导入、引用操作，其中 Vue.use()具体什么作用？个人理解：Vue.use(plugin, arguments)就是执行一个 plugin 函数，或执行 plugin 的 install 方法进行插件注册 (如果 plugin 是一个函数，则执行；若是一个插件，则执行 plugin 的 install 方法 …)；并向 plugin 或其 install 方法传入 Vue 对象作为第一个参数；如果有多个参数，use 的其它参数作为 plugin 或 install 的其它参数。(具体需要分析源码，在此不再过多解释) 二、动态路由什么是动态路由？动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。1、在 vue 项目中，使用 vue-router 如果进行不传递参数的路由模式，则称为静态路由；如果能够传递参数，对应的路由数量是不确定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子如下：
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
}, {
path: ‘/RouterComponents/:id’,
name: ‘RouterComponents’,
component: RouterComponents
}
]
})
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}`,
})
}
}
三、嵌套路由 vue 项目中，界面通常由多个嵌套的组件构成；同理，URL 中的动态路由也可以按照某种结构对应嵌套的各层组件：
export default new Router({
routes: [
{
path: ‘/’, // 根路由
name: ‘HelloWorld’,
component: HelloWorld
}, {
path: ‘/RouterComponents/:id’,
component: RouterComponents,
children: [
{
path: ”, // 默认路由
name: ‘ComponentA’, // 当匹配上 RouterComponents 后，默认展示在 <router-view> 中
component: ComponentA
},
{
path: ‘/ComponentB’,
name: ‘ComponentB’,
component: ComponentB
},
]
}
]
})