vue路由笔记

1.路由的概念
路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现，并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

3.Vue Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

4.Vue Router的使用步骤
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中
补充：
路由重定向：可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可

5.嵌套路由，动态路由的实现方式
A.嵌套路由的概念
嵌套路由最关键的代码在于理解子级路由的概念

B.动态路由匹配
//通过/:参数名 的形式传递参数
补充：
如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数
2.还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给
组件进行使用
3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为
函数形式。

6.命名路由以及编程式导航
A.命名路由：给路由取别名
B.编程式导航
页面导航的两种方式：
A.声明式导航：通过点击链接的方式实现的导航
B.编程式导航：调用js的api方法实现导航

一. this.$router.push说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面this.$router.replace({path: ‘/index’})

二.this.$router.replace
说明：跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
使用方法和push相同。

this.$router.replace({path: ‘/index’})

三.this.$router.go(n)
说明：类似window.history.go(n)，向前或向后跳转n个页面，n可正（先后跳转）可负（向前跳转）

this.$router.go(1)//类似history.forward()this.$router.go(-1) //类似history.back()