Vue项目功能实现：router传递参数并解决刷新页面参数丢失问题

Vue Router 传参方式：

1. this.$router.push({ name: &＃8216;模块名称&＃8217;, params: { // 各参数 } })

router.js：

export default new Router({
routes: [
{
path: '/paramsPassingByRouter',
component: ParamsPassingByRouter,
children: [
{
path: 'paramsMode',
name: 'paramsMode',
component: ParamsMode
}
]
}
]
})

ParamsPassingByRouter.vue：


params传参



ParamsMode.vue：

效果：

url：http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示：{&＃8220;id&＃8221;:&＃8221;20180101&＃8243;,&＃8221;name&＃8221;:&＃8221;张三&＃8221;,&＃8221;aka&＃8221;:&＃8221;z3&＃8243;,&＃8221;age&＃8221;:&＃8221;18&＃8243;}

但是刷新页面后，数据会丢失，显示：{}。

2. this.$router.push({ name: &＃8216;模块名称&＃8217;, query: { // 各参数 } })

router.js：

export default new Router({
routes: [
{
path: '/paramsPassingByRouter',
component: ParamsPassingByRouter,
children: [
{
path: 'queryMode',
name: 'queryMode',
component: QueryMode
}
]
}
]
})

ParamsPassingByRouter.vue：


query传参



QueryMode.vue：

效果：

url：http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示：{&＃8220;id&＃8221;:&＃8221;20180101&＃8243;,&＃8221;name&＃8221;:&＃8221;张三&＃8221;,&＃8221;aka&＃8221;:&＃8221;z3&＃8243;,&＃8221;age&＃8221;:&＃8221;18&＃8243;}

刷新页面后，数据不会丢失。

解决刷新页面数据丢失的方案：

1. 使用 this.$router.push({ name: '模块名称', query: { // 各参数 } }) 方式传参。

   缺点：参数值都拼接在 url 上，url 会很长，同时都可被看到。

2. this.$router.push({ name: '模块名称', params: { // 各参数 } }) 路由文件设置的时候把参数拼到 url 里。

   url：
   http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18

   缺点：同上。

3. 1 和 2 结合使用：this.$router.push({ name: '模块名称', params: { // 各参数 }, query: { // 各参数 } })。

4. 老老实实的用 localStorage 存储。

   url:
   http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3

   可以与 params 和 query 方式配合使用，可以暴露的参数显示在 url 上，同时刷新参数也不会丢失。

   销毁页面的时候把 localStorage 存储的内容清除。

   // router.js
{
path: 'paramsMode/:aka',
name: 'paramsMode',
component: ParamsMode
}