Vue Router之router.push和router.resolve页面跳转方式

更新时间：2025年04月08日 17:29:01 作者：₍•ʚ•₎呀呀

这篇文章主要介绍了Vue Router之router.push和router.resolve页面跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

params和query传参的区别

params传参只能通过 name 引入路由,如果写成path:‘/xxx’,获取的参数是 undefined,获取方式:route.params
query传参name和path二者都可正常获取, 获取方式route.query
params相当于post请求,参数不会显示在地址栏; query相当于get传参,可以在地址栏看到参数
路由跳转时推荐使用name的方式，因为路径可能会变，但名字一般是由具体含义的，一般不会变，写起来也简单一些

强调: 使用params传参必须通过name引入,不能通过path引入

params传参

// 使用params传参,使用name
router.push({
name: 'Login',
params: {
id: '2022-10-13'
}
})
// 获取参数
let id = route.params.id

query传参

// 使用query传参,通过name和path都能获取
router.push({
path: '/Home',
query: {
name: '我是通过url传递参数的'
}
})
// 获取参数
let name = route.query.name

打开方式

router.push 只能当前窗口打开
router.resolve 结合 window.open 可以新窗口打开

参数传递

router.push 支持query和params
router.resolve 只支持query，若需地址栏参数不可见，需结合localStorage/sessionStorage或第三方插件保存

示例

router.push

// 地址栏里带参
router.push({
path: '这里是path',
query: {
a: 1,
},
});

// 地址栏里不带参
router.push({
name: '这里是name',
params: {
a: 1,
},
});

router.resolve

// 地址栏里带参
let data = router.resolve({
path: "/channel",// 或者 name: 'channel',
query: {
a: 1,
},
});
window.open(data.href, '_blank');

// 地址栏里不带参
let data = router.resolve({
name: 'channel',
});
localStorage.setItem('a', 1);
// 然后跳转页接收 localStorage.getItem('a');

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

element 实现导航栏收起展开功能及思路
这篇文章主要介绍了element 实现导航栏收起展开功能，实现思路先给 el-menu加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起，需要的朋友可以参考下
2023-01-01
vue实现动态添加元素(可删除)
文章介绍了如何在Vue中动态添加和删除元素,通过使用Vue的响应式数据和v-for指令,可以轻松地实现这一功能,文章还详细讲解了如何处理元素的添加和删除事件,以及如何更新视图以反映这些变化
2024-12-12
Vue中点击active并第一个默认选中功能的实现
这篇文章主要介绍了Vue中点击active并第一个默认选中功能的实现代码，代码简单易懂，非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
Vue消息提示this.$message方法使用解读
这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,
2023-09-09
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
vue3表单输入绑定方式
这篇文章主要介绍了vue3表单输入绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue全家桶入门基础教程
Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧
2021-05-05
解决Vue2 axios发请求报400错误"Error: Request failed with s
这篇文章主要给大家介绍了关于如何解决Vue2 axios发请求报400错误"Error: Request failed with status code 400"的相关资料,在Vue应用程序中我们通常会使用axios作为网络请求库,需要的朋友可以参考下
2023-07-07
使用vue-cli脚手架工具搭建vue-webpack项目
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下
2019-01-01
vue中用动态组件实现选项卡切换效果
本篇文章主要介绍了vue中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03