vue路由

后端路由：根据不同的用户url请求，返回不同的内容

本质：url请求地址与服务器资源之间的对应关系

spa:用来支持前端地址的前进和后退操作

前段路由：用户事件与事件处理函数之间的对应关系

window.onhashchange：监听事件对象路由，location.hash获取到值

vue.router是vue官方的管理器

基本使用：

1.引入相关文件

2.添加路由链接（router-link,是vue中提供的标签默认渲染为a标签）

3.添加路由填充位（router-view）,渲染规则

4.定义路由组件

5.配置路由规则并创建路由实例

6.把路由挂载到vue实例中

路由重定向：redirect表示需要要被重定向的原地址，表示要被重定向的新地址

子级路由模板：创建路由链接

                        子级路由填充位（通过child添加）

总结实现步骤：

1.明白谁是父组件

2.在父组件中，在template模板添加子路由链接router-link to

3.写上，路由占位符router-view，起到一个渲染数据的作用

4.创建子组件例：

 const Tab1 = {   template: '<h3>tab1子组件</h3>'       }

5.写路由规则，在父组件的路由规则下面用children方法写子组件的路由规则

动态匹配路由：在相同的路径后面添加：id

在路由规则中，用component定义的数据例：user要用const进行定义数据拼接

在对应的路由组件中通过$route.params.id获取路由参数（不够灵活）

props传参:指定一个布尔值，

在路由规则下面定义props:true

在字组件用定义props[id]进行接收

也可以传递数值用对象封装数据：例:uname:age 

可以传递函数：例：

 props: route => ({ uname: 'lisi',      age: 12, id: route.params.id   })

命名路由：给命名规则加一个name属性

在路由链接link-route中给to进行绑定：to在讲name对应的组件和params对应的值进行填写

例:to="{ name: 'user', params: {id: 3} }">

声明式导航：普通网页中a标签或者link route

编程式导航：通过调用javascript形式实现导航的方式

this.$router.push('hash地址)

this.$router.go(n)

用法总结：在template模板中添加按钮，在methods添加方法进行操作