Vue学习（三）——前端路由

╰半夏微凉° 2021-09-07 07:44 383阅读 0赞

### 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组件

Vue学习（三）——前端路由

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue前端路由合并

相关 Vue学习：路由

相关 vue-router前端路由语法

相关 Vue Router前端路由

相关 Vue前端路由

相关 Vue——Vue-cli脚手架+前端路由

相关 Vue学习（三)---Vue路由

相关【前端】Vue路由

相关 Vue学习（三）——前端路由

相关 Vue.js--前端路由与vue-router