Vue-router 路由传参及隐藏参数详解

1.路由跳转及传参形式

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

各位还有啥好方法希望不吝赐教