Vue 之路由跳转传参方式详解【最全实用总结】

最新推荐文章于 2024-05-31 08:29:18 发布

原创最新推荐文章于 2024-05-31 08:29:18 发布 · 1.4w 阅读

64 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端面试

应用场景

Vue系列

本文详细介绍Vue中声明式和编程式路由导航的使用方法，包括不带参数和带参数跳转的具体实现方式及参数传递技巧。同时对比了params与query的区别。

这篇文章主要介绍了 vue 路由跳转传参的几种方式总结。

一、路由跳转

Vue 中路由跳转主要分为两种方式：

声明式路由导航（<router-link>）
编程式路由导航（js的方式）

下面将主要对这两种跳转方式进行详细解析。

二、声明式路由导航

`<router-link>`

不带参数跳转
```
<router-link :to="{name: 'home' }" > </router-link>
<router-link :to="{path: '/home'}" > </router-link>
// name, path都行, 建议用name 
<router-link :to="{name: 'home'}" tag='li'> </router-link>
```
注意：
1. <router-link> 中链接如果是 / 开始就是从根路由开始，如果开始不带 /，则从当前路由开始。
2. <router-link> 会默认解析成 a 标签，可以通过 tag 属性指定它解析成其他标签

带参数跳转

params方式传参：

<router-link :to="{name: 'home', params: {id:1}}"> 
// params 传参数 (类似post)
// 路由配置path: "/home/:id" 或者 path: "/home:id" 
// 不配置path: 第一次可请求, 刷新页面id会消失
// 配置path: 刷新页面id会保留
// html取参: $route.params.id
// script取参: this.$route.params.id

query方式传参：

<router-link :to="{name: 'home', query: {id:1}}"> 
// query传参数 (类似get, url后面会显示参数)
// 路由可不配置
// html取参: $route.query.id
// script取参: this.$route.query.id

三、编程式路由导航（js操作）

1. `this.$router.push()`

点击路由链接，跳转到新的页面，可以返回到当前路由界面

不带参数跳转

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

带参数跳转

query方式传参：

this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html取参: $route.query.id
// script取参: this.$route.query.id

params方式传参：

this.$router.push({name:'home',params: {id:'1'}})
// 只能用 name
// 路由配置path: "/home/:id" 或者 path: "/home:id",
// 不配置path, 第一次可请求, 刷新页面id会消失
// 配置path, 刷新页面id会保留
// html取参, $route.params.id
// script取参, this.$route.params.id

query 和 params 区别

query 类似 get，跳转之后页面 url 后面会拼接参数，类似 ?id=1，非重要性的可以这样传，密码之类还是用 params 刷新页面 id 还在；
params 类似 post，跳转之后页面 url 后面不会拼接参数，但是刷新页面 id 会消失。

2. `this.$router.replace()`

用新路由替换当前路由，不可以返回到当前路由界面

具体使用方式同上 this.$router.push()

3. `this.$router.back()`

请求(返回)上一个记录路由

4. `this.$router.go(n)`

向前或者向后跳转n个页面，n可为正整数或负整数

// 请求(返回)上一个记录路由
this.$router.go(-1)
// 请求下一个记录路由
this.$router.go(1)

5. 以上四种方式区别

this.$router.push：

跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面 ==>> 队列的方式（先进先出）
this.$router.replace：

跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面) ==>> 栈的方式（先进后出）
this.$router.back：

请求(返回)上一个记录路由
this.$router.go：

向前或者向后跳转n个页面，n可为正整数或负整数