vue-router路由传参及隐藏参数问题

更新时间：2022年12月01日 14:31:36 作者：Bayi·

这篇文章主要介绍了vue-router路由传参及隐藏参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

路由跳转及传参形式

vue中路由中需要传递参数的话可以用query和param传递，两者类似于get和post。

先上路由配置文件（router/index.js)

const routes = [{
    path: '/chat',
    name: 'Chat',
    component: Chat
}, ]

path 方式跳转（query）

<router-link :to="{ path: '/chat', query: { plan: 'private' }}">Register</router-link>

//简写不传参
this.$router.push('/chat')

//全写传参
this.$router.push({path:'/chat',query:{name1:'1',name2:'2'}})

获取query传参

this.$route.query
//获取结果
{name: "1", name2: "2"}

name 方式跳转（params）

传参👇

<router-link :to="{ name: 'Chat', params: { id: '123',name:'巴依' }}"></router-link>

this.$router.push({name:'Chat',params:{id:'123',name2:'巴依'}})

//router配置
const routes = [{
    path: '/chat',
    name: 'Chat',
    component: Chat
}]

未搭配动态路由时导航栏显示效果 👈此时，不会在导航栏中显示传递的数据，也可以正常获得params中的数据，但是刷新页面后会丢失params中传递的数据

//router配置
const routes = [{
    path: '/chat/:id/:name',
    name: 'Chat',
    component: Chat
}]

设置动态路由后导航栏显示效果 👈此时，就算刷新页面也不会丢失params中的数据，但同时也暴漏的传递的数据

获取params传参结果👇

this.$route.params
//获取结果
{id: "123", name: "巴依"}

注意！

query传参相当于get方式，会把要传递的参数显示在导航栏中。
params传参相当于post方式。默认不会把传递的参数显示在导航栏中。
query跳转路由传参显示参数这对于普通数据没什么,但是对于敏感数据，比如涉及到用户敏感信息，用query就不好了。
我们可以用params方式传递参数，它不会把传递的参数显示到导航栏中。

但是！

我们用 this.$route.params 获取数据后。刷新页面会丢失获取到的数据，但我们不能保证说让用户不刷新吧。

<————刷新页面后 params数据丢失

解决办法

会Vuex的，别使用路由传参了，直接把要传递的参数放到Vuex中它不香吗？

然后通过mutations设置state中的变量。在跳转后的页面获取Vuex中的变量

vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex 里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。

如何解决不赘述了网上方法太多，点下面链接看吧

解决vuex中数据刷新页面后数据丢失 👈点我

不想使用Vuex的，大致方法也在上图中，可以使用 Storage 的方式来保存传递的参数。cookie也可以。

window.sessionStorage.setItem("tagUser", JSON.stringify(tag));
window.sessionStorage.getItem('tagUser')

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

您可能感兴趣的文章:

Vue前端导出Excel文件的详细实现方案
在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下
2021-09-09
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
分享Vue组件传值的几种常用方式(二)
这篇文章主要介绍了分享Vue组件传值的几种常用方式，文章围绕主题斩开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
通过vue.extend实现消息提示弹框的方法记录
这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
VUE表达式{{}}中如何拼接字符
这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue指令中的v-once用法
这篇文章主要介绍了vue指令中的v-once用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
利用Vite搭建Vue3+ElementUI-Plus项目的全过程
vue3如今已经成为默认版本了,相信大多数公司已经全面拥抱vue3了,下面这篇文章主要给大家介绍了关于利用Vite搭建Vue3+ElementUI-Plus项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue-cli配置使用Vuex的全过程记录
这篇文章主要给大家介绍了关于vue-cli配置使用Vuex的相关资料,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,本介绍的非常详细,需要的朋友可以参考下
2021-07-07
vue中appear的用法
这篇文章主要介绍了vue中appear的用法,需要的朋友可以参考下
2017-08-08
vite+vue3项目报错：TypeError: Promise.allSettled is not a fu
Vite+Vue3项目中遇到“TypeError: Promise.allSettled is not a function”错误,通常是因为当前运行的JavaScript环境不支持Promise.allSettled,下面就来介绍几种解决方法,感兴趣的可以了解一下
2024-12-12