一、VueRouter---基本使用
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.Vue Router使用
2.1导入Vue Router
2.3定义组件
2.3定义路由规则
注解：定义规则，即告诉它匹配哪一个哈希，对应的显示哪一个组件。
2.4根据路由规则创建路由对象
2.5将路径对象挂载到Vue实例中
2.6修改URL哈希值
2.7通过<router-view>渲染匹配的组件
二、VueRouter---router-link
1.什么是router-link?
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于设置hash的标签router-link
2.router-link特点
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么
3.给router-link设置选中样式
默认情况下我们可以通过重写router-link-active类名来实现设置选中样式(不推荐)
但是我们也可以通过linkActiveClass来指定选中样式
4.重定向路由{ path: '被重定向值', redirect: '重定向之后的值' }
三、VueRouter---传递参数
1.Vue Router传递参数
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
只要能拿到路由对象, 就可以通过路由对象拿到传递的参数
方式一: 通过URL参数参数(?key=value&key=value), 通过this.$route.query获取
方式二: 通过占位符传递(路由规则中/:key/:key, 路径中/value/value), 通过this.$route.params获取
四、VueRouter---嵌套路由
1.什么是嵌套路由?
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
例如: 在one界面中又有两个按钮, 通过这两个按钮进一步切换one中的内容
五、VueRouter---命名视图
1.什么是命名视图?
命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同
五、VueRouter---watch属性
1.什么是Watch属性?
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法
2.Watch监听路由变化Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化
在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的
