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');

总结

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

您可能感兴趣的文章:

Vue实现星空效果
这篇文章主要为大家详细介绍了Vue实现星空效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue3 elementPlus部分组件样式修改的方法
这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-01-01
vue使用axios实现文件上传进度的实时更新详解
最近在学习axios，然后项目就用到了，所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料，文中先对axios进行了简单的介绍，方法大家理解学习，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
Vue无法访问.env.development定义的变量值问题及解决
这篇文章主要介绍了Vue无法访问.env.development定义的变量值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
简单聊聊Vue中的计算属性和属性侦听
计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下
2021-10-10
elementUI实现下拉选项加多选框的示例代码
因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Vue 实现登录界面验证码功能
本文通过实例代码给大家介绍了Vue 实现登录界面验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
浅析vue中的provide / inject 有什么用处
这篇文章主要介绍了vue中的provide / inject 有什么用处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-11-11
checkbox在vue中的用法小结
之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录到脚本之家平台，供大家参考
2018-11-11