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

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

一、路由跳转

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

1. 声明式路由导航（<router-link>）

2. 编程式路由导航（js的方式）

---

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

二、声明式路由导航

<router-link>

1. 不带参数跳转

   <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 属性指定它解析成其他标签

2. 带参数跳转

   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()

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

1. 不带参数跳转

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

2. 带参数跳转

   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. 以上四种方式区别

1. this.$router.push：

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

2. this.$router.replace：

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

3. this.$router.back：

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

4. this.$router.go：

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

---

四、总结

至此，Vue 的路由跳转以及跳转时的参数传递已经完整的介绍完毕，相信你认真看完之后会有新的认识。

希望以上内容可以帮助到大家。有任何问题欢迎讨论留言，最后不要忘记一键三连哦~。

各位 加油！