vuerouter获取当前路径_VueRouter

一、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通过渲染匹配的组件

二、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来判断当前界面是从哪个界面跳转过来的