前端---路由传参详解！

1.1 简介

在Webpack的【Vue组件化抽离】中，可以发现使用Vue以这种模式开发，最终打包的入口文件只有一个html文件，这种程序被称为SPA（单页应用程序），那么就没法使用传统的页面跳转去切换页面，因为Vue中已经没有真实的多页面了，都是组件(.vue)。

VueRouter就是用于将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们，模拟一个多页面交互的效果。

      

1.2 安装

注意创建脚手架的除了选择Babel--其他都不要选择

Vue2使用 vue-router@3 的版本，所以先下载 “npm install vue-router@3 ”

1.3 如何使用

   1.引入router【我们在上一步下载好了路由，接下来在main.js入口函数中引用】

 2.引入"页面"组件

创建一个index首页组件

4.配置好路由相关配置

因为挂载路由---会帮我们注册这两个组件----所以我们使用它在App.vue

这个是用来显示首页的

当我们在页面地址栏输入index的时候--就会出现index页面

6.优化路由

而且main.js是入口文件----我们在这里面写入路由就显得不简洁

所以我们自己单独创建个路由文件

把main.js的路由相关都移入router.js中---再给他导出去

在main.js中引入

【但是这种修改网址地址--跳转index页面--不是我们通常点击跳转方法】

路由跳转

用router-link实现跳转

点击首页

实现--首页页面的加入

加上tag---标识切换按钮样式

再创建一个组件

同样引入注册

实现点击--打印this.$router---打印出router实例

push 跳转

字符串格式的push

结果：点击我的

并且观察--有个后退【push：实现后退和前进】

对象形式push

结果

或者用name跳转

结果也是一样

replace跳转

字符串跳转replace

效果--【replace没有前进后退功能】

对象跳转replace

补充:router-link的激活样式

router-link标签如下

---未点击前的样式

点击后的样式：多出router-link-active【router-link-exact-active：它作用是匹配当前的子路由--简而言之就是给儿子路由加样式而不会给父亲路由加样式】

运用：点击“首页2”----“首页2”的激活样式变为红色

效果前

效果后---这字体点击激活胡----变红色

路由传参

query传参

1.使用<router-link> 传参：

在里面用'?'+参数：这种属于比较老传参方式

看效果：未点击前

点击后：链接带了参数

补充：this.$router和this.$route区别

this.$router：全局路由【所有页面路径信息】

this.$route：当前路由【也就是当前的页面的路径对象】

我们打印看一下this.$route长啥样

结果：发现参数放到了query中

那么我们可以获取到query中的参数

想把参数渲染在在页面如何做？

效果

2.使用$router 传参

一种是path+query，另外一种是name+query：都可以传参，建议用第一种

效果：点击前

点击后---发现他拼接了【query传参，类似get请求，参数直接拼接在地址栏】

query传参，不会保留数据类型

打印结果：蓝色表示number类型，说明我传入的时候是number，输出来的是字符串类型

params传参

   只能name+params形式

打印当前路由看看

发现数据是存放在params中

再次打印username

发现是蓝色字体--说明他是number类型---保留了原本的数据类型

发现没有显示在地址上------故类似于post，参数不会显示在地址栏

而且点击刷新或者返回再前进：发现拿不到this.$route.params.username-----这样保证数据安全

因此使用场景：要求用户通过制定步骤，带参进入到指定页面，跳转详情页

动态路径参数

1.query传参：刷新数据，参数不会丢失，数据暴露在浏览器地址

2.params传参：刷新数据，参数会丢失，数据不会暴露在浏览器地址

动态路径参数结合query与params的优点【如何实现?看以下操作】

第一步：先创建个“发现”页面----再注册路由

接入参数名称

来到App.vue:跳转带参【id一定要与路由那边的id名要一致，否则找不到！！！】

params传参

效果：我们预期输出路径应该是localhost:8080/#find/id=1,但是图中只显示了111----这样保证了安全性，因为单靠一串数字是不知道他是id值还是其他什么值

我们打印看一下能不能拿到当前数据

可以拿到，并且刷新或者前进或者后退都可以获取到当前的数据

query传参

效果：前进后退都可以保留数据且不会显示在地址栏

router-link传参

效果：前进后退都可以保留数据且不会显示在地址栏