Vue路由跳转：router-link与this.$router.push用法及params/query传参区别

脚本专家

Vue单页应用开发中，路由跳转是最常见的操作之一。本文总结Vue Router提供的几种跳转方式，重点区分params和query传参的差异，并结合代码示例说明。

一、声明式导航：router-link

使用<router-link>标签可以直接在模板中跳转，它会渲染为<a>标签，但会阻止默认页面刷新。

2. <!-- 直接跳转，不带参数 -->
3. <router-link to="/testDemo">
4.   <button>点击跳转</button>
5. </router-link>
7. <!-- 带query参数，地址栏可见 -->
8. <router-link :to="{path:'testDemo', query:{setid:123456}}">
9.   <button>点击跳转（query）</button>
10. </router-link>
12. <!-- 带params参数，地址栏不可见 -->
13. <router-link :to="{name:'testDemo', params:{setid:1111222}}">
14.   <button>点击跳转（params）</button>
15. </router-link>

复制代码

注意：使用params时必须配合name，不能只用path，否则params会被忽略。

二、编程式导航：this.$router.push()

在方法中通过$router.push()跳转更灵活，常用于按钮点击、登录验证等逻辑。

2. <template>
3.   <div>
4.     <button @click="goTo">点击跳转</button>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   methods: {
11.     goTo() {
12.       // 直接跳转
13.       this.$router.push('/testDemo');
14.       
15.       // 带query参数（地址栏可见）
16.       this.$router.push({path:'/testDemo', query:{setid:123456}});
17.       
18.       // 带params参数（地址栏不可见）
19.       this.$router.push({name:'testDemo', params:{setid:111222}});
20.     }
21.   }
22. }
23. </script>

复制代码

三、params与query传参的对比

1. 请求方式类比：query传参类似HTTP GET请求，参数拼接在URL中，刷新页面后参数依然存在；params传参类似HTTP POST请求，参数不显示在URL中，但刷新页面时参数会丢失（除非在路由配置中动态路径）。

2. 地址栏表现：
- path + query：地址栏显示为 /testDemo?setid=123456
- name + params：地址栏显示为 /testDemo（参数不可见）

3. 接收参数：目标组件内通过 $route 对象获取（注意是$route，不是$router）。

2. <template>
3.   <div>
4.     testDemo {{ this.$route.query.setid }}
5.   </div>
6. </template>

复制代码

对应接收params的方式：this.$route.params.setid。

四、a标签跳转：只能跳转站外链接

2. <a href="https://www.baidu.com"><button>跳转百度</button></a>

复制代码

直接使用<a>标签跳转外部链接没问题，但无法实现Vue路由内部跳转（会刷新页面）。如需内部跳转，仍然推荐router-link或$router.push。

五、前进/后退：this.$router.go()

2. // 后退一步，等同 history.back()
3. this.$router.go(-1);
5. // 前进一步，等同 history.forward()
6. this.$router.go(1);

复制代码

也可以在模板中绑定按钮：

2. <button @click="goBack">上一页</button>
3. <button @click="goForward">下一页</button>
5. methods: {
6.   goBack() { this.$router.go(-1); },
7.   goForward() { this.$router.go(1); }
8. }

复制代码

六、综合示例：一个包含多种跳转方式的页面

2. <template>
3.   <div id="app">
4.     <router-link to="/">[跳转到主页]</router-link>
5.     <router-link to="/login">[登录]</router-link>
6.     <router-link to="/logout">[登出]</router-link>
7.    
8.     <button @click="goHome">[跳转到主页]</button>
9.     <button @click="goBack">[上一页]</button>
10.     <button @click="goForward">[下一页]</button>
11.   </div>
12. </template>
14. <script>
15. export default {
16.   name: "App",
17.   methods: {
18.     goHome() {
19.       this.$router.push("/");
20.     },
21.     goBack() {
22.       this.$router.go(-1);
23.     },
24.     goForward() {
25.       this.$router.go(1);
26.     }
27.   }
28. };
29. </script>

复制代码

总结：
- 使用声明式导航（router-link）更语义化，适合静态链接。
- 编程式导航（$router.push）适合逻辑跳转。
- 传参选query还是params取决于是否需要参数持久化：query刷新不丢失，params刷新丢失（除非使用动态路由）。
- 地址栏显示参数用query，隐藏参数用params。
- 前进后退用$router.go(n)。

掌握这些方式后，基本能满足Vue单页应用中的页面跳转需求。

热心网友7

总结得很详细，特别是params和query传参的区别，地址栏表现和刷新后参数是否保留这部分讲得很清楚，对新手非常友好。补充一点：使用params配合name时，如果路由配置里用了动态路径（比如 path: '/testDemo/:setid'），刷新后参数也不会丢失，接收时仍然用 $route.params.setid。感谢分享！