关于vue.js:vuerouter-路由传参刷新页面参数丢失

42次阅读

共计 1723 个字符，预计需要花费 5 分钟才能阅读完成。

常见场景：点击列表的详情，跳转到详情内页，在内页依据传递的参数获取详情数据。

路由传参个别有如下几种形式，上面次要介编程式导航 router.push 的传参形式：

路由配置如下：

{ 
    path: '/detail/:id',  // 若 id 前面加? 代表这个参数是可选的
    name: 'detail', 
    component: Detail 
}

通过 $router.push 中 path 携带参数的形式

// 列表中的传参
goDetail(row) { this.$router.push({path: `/detail/${row.id}`
    })
} 

// 详情页获取参数
this.$route.params.id

通过 $router.push 的 params 传参
```
// 列表页传参
goDetail(row) { this.$router.push({
        name: 'detail',
        params: {id: row.id}
    })
} 

// 详情页获取
this.$route.params.id
```
注：这种形式的传参，门路用 name，门路用 name，门路用 name , 用 path 会获取不到；如果在路由配置中没有增加 /:id 即 path: 'detail'，url 中不会显示 id，在详情页还是能够拿到参数 id，但刷新后参数失落。
以上这两种形式，传递的参数 id 会在 url 前面显示，如图：
传递的参数会裸露在网址中。

如果在路由中设置了 params 参数 /:id，然而在跳转的时候没有传递参数，会导致页面没有内容或跳转失败，可在前面加？代表这个参数是可选的，即 /:id?

// 路由配置
{ 
    path: '/detail', 
    name: 'detail', 
    component: Detail 
} 

// 列表页
goDetail(row) { this.$router.push({
        path: '/detail',
        query: {id: row.id}
    })
} 

// 详情页
this.$route.query.id

注：这种形式传递的参数会在地址栏的 url 前面显示 ?id=?，相似于 get 传参；query 必须配合 path 来传参。

还有一种状况就是，如果通过 query 的形式传递 对象或数组，在地址栏中会被强制转换成 [object Object]，刷新后也获取不到对象值。

此时能够通过 JSON.stringify() 办法将要传递的参数转换为字符串传递，在详情页再通过 JSON.parse() 转换成对象。

let parObj = JSON.stringify(obj) 
this.$router.push({
    path: '/detail',
    query: {'obj': parObj}
}) 

// 详情页
JSON.parse(this.$route.query.obj)

这个办法尽管能够传递对象，若数据少还好，数据多的话地址栏就很长了

留神：在所有的子组件中获取路由参数是 $route 不是 $router

以上 params 和 query 传参形式比照：

通过 $router.push 的 params + name 传参，若路由中没有设置 params 参数，参数不会拼接在路由前面，然而页面刷新参数会失落。
通过 $router.push 中 path 携带参数或通过 query 传参，参数会拼接在地址前面，会裸露信息。

// 路由配置
{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    props: true // 如果 props 设置为 true，$route.params 将被设置为组件属性
} 

// 列表页
goDetail(row) { this.$router.push({
        path: '/detail',
        query: {id: row.id}
    })
} 

// 详情页
export default {
    props: { // 将路由中传递的参数 id 解耦到组件的 props 属性上
 id: String
    },
    mounted: {console.log(this.id)
    }
}

详见：动静路由匹配路由组件传参

此外，还能够通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数失落的问题，具体结合实际我的项目即可。

正文完