Vue学习（三）——前端路由
Vue学习（三）——前端路由
一、路由
一个完整的URL由几部分组成
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
(1) 协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
(2) 域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用
(3) 端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
(4) 虚拟目录部分（路径）：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
(5) 文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
(6) 参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
(7) 锚部分（哈希）：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
前三个部分（协议、域名、端口）的改变会导致跨域的问题
前六个部分（协议、域名、路径、文件名和参数）的改变会导致浏览器向服务端发送新的请求
只有锚部分，即哈希部分的改变不会导致浏览器向服务器端发送新的请求
所以前端路由是基于hash实现的
二、前端路由的实现
前端路由的作用就是根据路由的数据去渲染页面
前端的路由是基于hash实现的
1、vue路由
Vue提供了路由插件，方便我们使用路由
（1）安装路由
npm install --save vue-router
（2）使用路由
使用路由可分为六步
第一步：在模块化开发中，通过use方法安装路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
第二步：定义路由渲染位置
通过router-view组件
第三步：定义页面组件
路由简化了组件的定义，只需要定义extend参数对象集合即可
第四步：路由定义规则
路由规则就是一个数组，每一个成员代表一条规则，是一个对象：
path: 定义规则，类似于express中的路由规则
用/ 切割路径，默认是静态路由
静态路由：是一个一对一的路由规则 例如：home/product 就只对应 /home/product
动态路由：是一个一对多的动态路由 例如 ：home/product/:id 可以是1、2、3、4等
component: 渲染的组件名称
name: 组件名称
第五步：实例化路由，并传递路由规则 ：routes
第六步： 在vue实例化对象中，注册路由，通过router属性
三、路由的基本用法：
（1）路由参数
在vue实例化对象中，注册了router,此时所以的组件都会继承两个属性： r o u t e r , router, router,route
并添加给实例化对象自身，并设置了特性,所以既可在模板中使用，又可在组件中使用
$router： 代表的是路由实例化对象，管理路由，并提供了一些操作路由的方法 例如：push,replace，go等
$route：存路由信息 fullPath : 完整路由
hash: 路由上的hash (hash 路由中url第二个 #后面的)
path : 路由
query : search数据 （被解析成了对象）
params：动态路由对象（被解析成了对象）
props: 定义路由规则的时候，可以设置props属性，可以为渲染的组件，传递属性数据
此时组件要通过props属性接收数据
props：true 将动态路由数据直接传递给组件
props:fn 函数参数可以是route对象，返回值对象中的属性会传递给组件
（2）默认路由： 当没有匹配到路径，希望渲染默认页面的时候，可以使用默认路由。
直接将path匹配* 即可
由于默认路由匹配的地址很广，因此常常将其配置在最后面
（3）路由重定向 ： 当我们输入一个地址，想渲染另一个页面，此时可以使用路由的重定向技术
通过path 匹配地址
通过redirect 属性配置重定向的地址
（4）子路由：在页面的某个区域切换子页面，可以使用子路由
使用子路由的步骤：第一步：定义子路由的渲染位置
在父路由模板中，通过router-view来定义
第二步：在路由规则中，我呢吧可以通过children属性定义子路由配置
是一个数组，每一个成员代表的是一个子路由配置对象
可以配置：path,component,name，redirect,props,children–等
path可以是绝对路径，也可以是相对路径
绝对路径：以/ 开头 完整路径；子路由路径
相对路径：不是以/ 开头 完整路径：父路由路径+子路由路径
（5）路由模式 ：通过mode属性定义路由模块，默认是hash路由，我们可以设置成history路由（基于path切换页面），history这种模式需要服务器端的配置
我们在实例化路由的时候，可以设置路由模式
（6）滚动条：我们在切换页面的时候，可以设置滚动条的位置，通过scrollbehavior方法设置滚动条位置
第一个参数：表示当前路由数据对象
第二个参数：按时表示上一个路由数据对象
第三个参数表示当前滚动条的位置
返回值就是设置的滚动条的位置
x :代表水平方向滚动条位置
y:代表垂直方向滚动条位置
（7）路由导航：就是用来切换路由的。
html中切换页面通过a标签的href属性
Js中切换页面通过location对象
为了简化页面的切换，vue提供了路由导航组件：router-link.
router-link: to 是必须的额，用来设置地址
tag 用来设置渲染的元素，默认渲染成a 属性
v-text 设置内容：是一个指令属性值是JS环境，内容还可以 直接写在组件
（8）路由过渡：通过transition组件使用，通过name属性定义过渡名称
我们可以使用mode属性设置过渡模式，例如out -in 模式
四、路由守卫
路由守卫就是监听路由的变化由三种方式：
（1）全局路由守卫
通过路由实例化对象，订阅事件方法（beforeEach,afterEach等）监听路由变化
参数是回调函数 ：第一个参数表示当前路由对象
第二个参数表示上一个路由对象
如果beforeEach有三个参数，next必须执行
全局路由守卫对所有组件都生效
（2）局部路由守卫
在组件中，通过beforeRouteEnter,beforeRouterLeave,beforeRouteUpdate等方法，监听路由变化
针对当前组件生效
第一个参数表示当前路由对象
第二个参数表示上一个路由对象
第三个参数表示next方法，必须执行
（3）通过watch监听￥route的变化
第一个参数表示当前路由数据
第二个参数表示上一个路由数据
这种方法第一次不会执行，要等到路由变化的时候，才能执行
为了弥补创建对的时候没有执行的问题，我们可以在创建期方法中执行
为了保证watch长期有效，我们可以使用keep-alive组件