【Vue.js的路由4】

01 路由

Web应用程序（网站）：B/S架构、基于“请求-响应”模型

客户端（Browser）->发送请求（request）->服务器端（Sever）->回发响应（response）->客户端（Browser）

路由：选择路径

后端路由：客户端发起请求->服务端->处理请求，回发响应对象->客户端

单页应用程序：整个网站只有一个html页面。

前端路由：不经过服务器，本质上就是组件的显示和隐藏。

统一资源定位符URL(网址)

https://music.163.com:80/#/discover/album/

https://music.163.com/#/discover/artist/cat**?id=1002** 表示参数

https://music.163.com/store/product

location对象

location.hash:获取哈希值(锚点值，以#开头)

#/

#/about

location:hostname:获取主机域名

location:port:获取端口号

localhost:8080

location:protocol:获取协议

http:

location:port:获取完整的URL

history对象

history.back():后退

history.forward()：前进

Vue Router(路由插件)是Vue.js 的官方路由。

Vue2搭配Vue Router3

Vue3搭配Vue Router4

在Vue工程项目中应用路由插件Vue Router，步骤如下：

1.安装路由插件

​ 在项目根目录下运行命令：

​ npm install vue-router@3 //@代表版本

​ 或使用命令：vue add vue-router@3

2.写路由配置文件

src/router/index.js

导入路由插件

import Router from ‘vue-router’

3.使用路由插件

//导入Vue核心文件

import Vue from ‘vue’

//使用插件

Vue.use(Router);

4.创建路由规则

1条路由->1个规则(1个JavaScript对象)

若干条路由->若干规则(js对象数组)

5.创建路由管理器对象，注入路由管理器

​ const router=new 路由插件对象({});

6.将路由管理器对象挂载到当前Vue实例

7.配置路由链接及路由视图

02 路由嵌套传参

2.1 嵌套路由

children 定义嵌套路由

2.2 路由传参

URL

https://s:taobao.com/search?q=奢品

？q=奢品开始的内容 “查询字符串” key-value对

查询字符串的格式：？名字1=值1&名字2=值2

请求：get请求：点击超链接/数去URL地址 ，get请求的数据以查询字符串形式显示在浏览器的地址栏中，因此，get请求不安全。

​ post请求：表单默认的请求也是get(methods=“get”)

​ post请求以对象的形式发送数据，不会在地址栏显示，因此post请求方式相对更安全。

路由传参的方式①query(查询字符串)

②params(动态参数)