路由：Vue-router（vue路由插件）
先了解下 route、routes、router三者之间的区别
（加$只是为了区别其它变量）
router：一般指的是路由实例 ，如：vue的编程式导航 this.$router.push()
routes：指创建 vue-router 路由实例的配置项，用来配置多个路由对象
route：指路由对象，如：this.$route 指当前路由对象
作用：
1）通过路由，点击Tap在当前页面的某个板块不跳转展示相应的组件；
2）通过路由，点击Tap跳转到新的页面并展示对应的组件；
前者相当于 <a href="javascript:;"/>,后者相当于 <a href="" target="_blank"/>。
注1：Tap点击 <a href=""/> 跳转刷新页面，router 跳转不刷新页面；
注2：第一次切换时，Vue 会渲染相应组件，在之后的切换中， Vue 不会重新销毁创建组件，生命周期只在第一次展示时调用，之后均不会调用，可以通过 watch 监听路由变化进行相应的操作
示例：
1）安装路由
npm install --save-dev vue-router
2）引入、使用、配置、注入路由
引入：在 main.js 中引入路由 或 引入新建的路由文件
使用：在main.js 中使用路由
配置：在 main.js 中配置路由 或 引入新建一个路由文件 router.js在 router.js中配置
注入：在 main.js 中注入路由
示例：
（1）在 main.js 中配置路由的情况
（2）新建 router 配置路由（推荐）
3）在组件中使用路由
页面跳转规律：
平级路由之间的跳转只更新平级之间的组件页面
如下面示例中的：HelloWorld（首页路由） 和 RouterBottomNav（另一个页面路由）属于平级路由 ，切换时更新同一个 <router-view/>；两个子级路由更新同一个 <router-view/>
效果图/
在router文件中配置路由
在组件中使用路由
进阶
1）动态路由：
作用：同一个组件展示不同的内容，但是地址参数不同；
简单的说就是复用同一个组件，路由地址不变，路由参数改变；
如：一个应用的个人中心的排版布局基本上没区别，区别主要是在内容上；这时可以使用同一个个人中心组件展示不同用户的信息，只需在路由中加入用户参数加以区别。
注1：在 Vue 实例内部，可以通过 this.$router 访问路由实例，this.$route 访问当前路由对象
注2：以下示例中使用 watch 监听路由变化的原因是，第一次切换时，Vue 会渲染相应组件，在之后的切换中， Vue 不会重新销毁创建组件，而是复用组件，生命周期只在第一次展示时调用，之后均不会调用，可以通过 watch 监听路由变化进行相应的操作
示例：
创建、引入、配置、使用 RouterActive.vue 组件
2）嵌套路由
作用：父级路由中包含子级路由之间的切换
如：首页是根路由，首页中含有 苹果、香橙、甜橘， tap ，点击tap的时候某个板块（组件）展示这些水果的详情
示例图：
示例：
引入、使用、配置路由
组件中使用路由
3）导航（路由）守卫
定义：简单的讲就是对跳转的路由进行判断，从而做出相应的判断（如：在用户进行其他操作之前先进行判断是否登录或注册）
）路由小细节
Tag：改变路由默认的元素（默认 a 标签）
示例：
*：所有路由，当输入的地址发生错误时跳转到该路由地址
示例：
Name：定义路由名称
示例：
动态跳转：
示例：
指定展示默认的子级路由：
示例：
监听路由变化：
示例：
路由参数：
params：同一个页面下的不同参数（如个人用户的页面都是使用同一类，但是个人用户的id不同）
query：传递参数（地址 问号 ？后面的参数）
meta：向路由传递参数
示例：
获取当前路由详细参数：
