一，定义
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
路由：route 一组key-v的对应关系(路径的改变对应的组件进行切换)
路由器：router 多个路由需要路由器管理，为了实现单页面应用(SPA)
二，安装--路由
1， 安装指令：npm i vue-router@3 安装3版本
第一步 ，在src根目录创建router目录，在router目录中创建index.js 文件
文件中的代码如下：
//引入vue
import Vue from 'vue';
//导入vue-router
import VueRouter from 'vue-router'
//应用插件
Vue.use(VueRouter)
//创建router规则对象 (一般数据都写在这里)
const routes = [
]
//创建router
const router = new VueRouter({
routes
})
//导出router
export default router
第二步 将 router 挂载到 main.js 文件中
第三步，创建路由组件
在根目录src下创建pages目录
路由组件多了两个属性：$route $router
第四步 创建路由规则
路由规则 (router/index.js) 一个路由对应一个组件
AboutList组件
//导入组件
import AboutList from "../pages/AboutList";
routes:[
{
path:'/about',
component:AboutList
}
]
第五步，使用路由
该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。
<router-link to="/about" active-class="hover">关于我们</router-link>
该标签会根据当前的路径，动态渲染出不同的组件。
<router-view></router-view>
5.1 router-link属性：
to：用于指定跳转的路径。
tag：tag可以指定<router-link>之后渲染成什么组件。
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
5.2 mode属性
hash模式：vue的路由默认是hash模式，地址栏后面会带一个#号。
history模式：mode=”history”---去除#号
在index.js文件中操作
区别：
1：hash，兼容性好，history旧版本浏览器不兼容
2：hash带的#不会发送给服务器，history会发送给服务器，程序部署上线时需要后端人员支持，解决404刷新问题。配置一下apache或是nginx的url重定向，重定向到你的首页路由上。
第六步：配置一个默认路径 在配置文件下写入一下代码段：
{
path: '/',
redirect: '/about'
},
三，嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。
接下来我要给公司简介设置一个二级路由
四，路由的传参
1，params的类型,
配置路由格式：/router/:id（动态路由）
/xxx/xxx/1/张三
代码：
<router-link :to="`/message/show/${item.id}`">{{item.realname}}</router-link>
路由声明：
第一种：props:{id:10,title:'ttt'}
第二种：props:true 该路由的params的参数，传传递到该组件的props身上
第三种 值为函数(下方query参数在演示)
props($route){
return {id:$route.query.id,title:$route.query.title}
}
2，Query参数的类型
字符串形式：
<li v-for="item in res">
<router-link :to="`/about/news/show?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>
</li>
参数接收：
$route.query.id
$route.query.title