Vue页面跳转传参

### Vue.js 中实现页面跳转并传递参数的方法 在 Vue.js 开发中，页面跳转和参数传递是一个常见的需求。以下是几种常用的方式及其具体示例： #### 方法一：通过 `this.$router.push` 使用 Query 参数 Query 参数类似于 HTTP GET 请求中的查询字符串，在 URL 地址栏会显示出来。 ```javascript // 跳转页面并携带参数 this.$router.push({ path: '/userManager', query: { id: this.id } }); // 接收参数 let receivedId = this.$route.query.id; ``` 这种方式适合用于需要让用户看到或者分享参数的情况[^2]。 --- #### 方法二：通过 `$router.push` 使用 Params 参数 Params 参数不会直接暴露在 URL 中，因此更适合隐藏一些敏感信息。 ```javascript // 跳转页面并携带参数 this.$router.push({ name: 'UserManager', params: { userId: 123 } }); // 接收参数 let receivedUserId = this.$route.params.userId; ``` 需要注意的是，使用 `params` 的时候，目标路由必须定义名称（name），而不是仅仅依赖路径（path）[^3]。 --- #### 方法三：通过 `<router-link>` 实现组件内的跳转 如果是在模板中进行跳转，可以直接利用 `<router-link>` 组件完成。 ```html <router-link :to="{ path: '/detail', query: { index: 1 }}">跳转</router-link> ``` 这种写法更加简洁明了，适用于静态页面结构的场景[^5]。 --- #### 方法四：通过 JavaScript 动态触发事件来跳转 可以在按钮点击或其他交互行为下动态执行跳转逻辑。 ```html <template> <button @click="navigateToPage">跳转</button> </template> <script> export default { methods: { navigateToPage() { this.$router.push({ path: '/targetPage?param=value' }); } } }; </script> ``` 这种方法灵活性较高，尤其适合复杂的业务逻辑处理后才决定跳转的目标位置[^1]。 --- #### 方法五：新开窗口跳转至指定链接 对于某些特殊需求，比如希望在一个新的浏览器标签页加载目标页面，则可以借助原生 JS 配合 Vue Router 提供的功能达成目的。 ```javascript const routeData = this.$router.resolve({ path: "/newpage", query: { key: "value" } }); window.open(routeData.href, '_blank'); ``` 这里的关键在于调用了 `$router.resolve()` 来生成最终完整的 URL 字符串后再交给 window 对象去打开新 Tab[^4]。 --- 以上便是多种基于 Vue.js 平台之上关于页面之间相互切换以及数据交换的技术手段介绍。每一种都有各自适用范围，请根据实际项目情况选取最合适的方案加以运用！