1. vue-router路由的应用和本质
传统的路由是用一些超链接来实现页面切换和跳转，而vue-router在单页面应用中,则是组件之间的切换。其本质就是：建立并管理url和对应组件之间的映射关系。
2. vue-router简略图示关系
注意：图说的有点不准确,to其实并不是仅仅对应path值.要分具体情况,详情查看官方to的api
3. 安装vue-router
3.1 自动安装
在创建项目时，在交互式命令行中选中Router按空格键，然后回车，脚手架就会自动安装vue-router
3.2 手动安装
3.2.1 下载 npm install vue-router -S
3.2.2. 在vue组件内配置router-link和router-view
router-link默认解析为a标签，后面接to来指定跳往的地址；router-view就是在标签内渲染你路由匹配到的视图组件
3.2.3 配置路由实例 router.js文件
自建一个router根目录，在下面创建 index.js文件（作用：都写在main.js中容易混淆，单独写在一个文件中会更加清晰）
在index.js引入router，并创建实例导出：
3.2.4 router,routes,route区别
- router:一般指的就是路由实例，如$router.
- routes:指router路由实例的routes API。用来配置多个route路由对象.
- route:指的就是当前页面的路由信息对象，例如path 参数等等。
4. 声明式导航
4.1 不传值的情况
只需要创建几个vue文件，在App.vue的中放入router-link，在to后面放入其他文件的地址（注意前面要加/），就可以实现跳转
4.2 传值的情况
声明式比较简单，只需要注意‘？’对应query，‘/’对应params即可。
4.2.1 在about.vue（自定义文件名）中设置跳转地址
4.2.2 在index.js中导入各个文件（组件）路径并写入routes数组中调用
4.2.3 在homepage.vue文件中写入两种接收数据的方式
最后在localhost：8080中就可看到如下的演示效果：
点击小豪后：
点击小智后：
5. 编程式传参
一般使用：在跳转页面之前传值，声明式的会直接跳转页面
5.1 不传值情况
如图所示，运用点击事件来执行跳转，path路径和name两种方法都可以，用name的话需要在index.js中对应对象中添加，这里的“this.$router.push”是固定语法。
5.2 传值情况
语法和不传值情况基本一样，点击事件的函数中，我这里是用了name来指定路径，也可以用path。
在homepage.vue中写入接收表达式
在myworld.vue中写入接收表达式
点击“小豪”：
点击“小智”
5.3 注意点
- ‘<router-link:to="{ }">’等同于this.$router.push()
- 编程式传参中，点击事件函数里path和params是不能同时存在的，建议使用path+query的组合。
- params参数都不会显示在url地址栏中，除了在路由中通过routes进行配置的，所以用户刷新页面后,params参数就会丢失，而query参数可以正常显示在url地址栏中，刷新页面后也不会丢失。
6.路由嵌套
嵌套路由:就是父路由嵌套子路由。
6.1 要点
一个对应展示的就是一个组件 因此实现嵌套路由有两个要点:
- 路由对象中定义子路由(嵌套子路由)
- 组件内的使用.
6.2 基础用法
{ path: "/find", name: "Find", component: Find, children: [ { path: "recommend", component: Recommend }, { path: "ranking", component: Ranking }, { path: "songlist", component: SongList }
6.2.1 嵌套路由特点
嵌套路由最大的特点就是在一个父路由中添加子路由，通过children属性，提供子路由的路径和组件内容。这里需要注意：子路由的路径不能加‘/’，其他的准备这里就不再一一贴出来了，子页面和上面传参的展示页面时一样的。
6.2.2 父子页面区别
- 父页面负责进入外面的大页面，可以点击切换
- 子页面只会在嵌套的那个父页面中显示，也可以点击切换
最后：我觉得其他的基础使用都可以在官方文档上看介绍看懂，就不在这里写了，这里写的几种使用情况，希望对以后的回顾有作用。
