今日学习内容：
1.什么是Vue Router?
Vue Router和**v-if/v-show**一样, 是用来==切换组件==的显示的
v-if/v-show是**标记**来切换(true/false)
Vue Router用**哈希**来切换 (**#xxx**)
比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候**传递参数**
2.URL的组成：
URL由三部分组成：
资源类型、存放资源的主机域名、资源文件名
也可认为由4部分组成：
==协议、主机、端口、路径==。（很多时候端口都是隐藏的）
还可以认为由7部分组成：
协议，域名，端口，虚拟目录，文件名，锚，参数
URL的一般语法格式：(带方括号[]的为可选项)
==protocol :// hostname[:port] / path / [;parameters][?query]#fragment==
3.Vue Router使用
1 导入Vue Router
https://unpkg.com/vue-router@3.1.3/dist/vue-router.js
**unpkg**：是一个前端常用的公共CDN
2 定义路由规则（切换规则）
3 根据路由规则创建路由对象
4 将路径对象挂载到Vue实例中
5 用a标修改URL哈希值
6 通过<router-view>渲染匹配的组件
4.什么是router-link
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于**设置hash的标签** router-link
把原来的a换成router-link
2.router-link特点
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么
3.给router-link设置选中样式
控制台中查看router-link渲染出来是a，选中后会加入样式outer-link-active
默认情况下我们可以通过重写**router-link-active**类名来实现设置选中样式（控制台可见）
4 [参照Router构造选项中](https://v3.router.vuejs.org/zh/api/#linkactiveclass)：
增加**linkActiveClass**配置项，并在css中定义my-active样式
5.重定向路由
进入后想显示默认页面，这时候需要重定向路由来实现。
Vue Router传递参数
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
只要能拿到路由对象, 就可以通过路由对象拿到传递的参数
在控制台打印对象 vue.$route，通过他可以拿到参数
方式一: 通过URL参数
在指定HASH的时候, 通过?key=value&key=value的方式传递
在传递的组件的生命周期方法中通过 ==this.$route.query==的方式来获取
方式二: 通过占位符传递
在指定路由规则的时候通过**/:key/:key**的方式来指定占位符
在指定HASH的时候, 通过/value/value的方式来传递值
在传递的组件的生命周期方法中通过 this.$route.params的方式来获取
6.嵌套路由
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
1 给二级路由配置 /one/onesub1
2 加入path
3 子路由要定义在一级路由内：需要配置到one中的children属性中，children[{},{}],
7.Watch监听路由变化
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法
Watch属性不仅仅能够监听数据的变化, **还能够监听路由地址的变化**
vue.$route中的path就是路由地址，在watch属性中监听**$route.path
|
