Vue Router 传递参数并解决刷新页面参数丢失问题

Vue Router 传递参数并解决刷新页面参数丢失问题 本文主要讨论了 Vue Router 传递参数的方式，并解决了刷新页面参数丢失的问题。下面是对该问题的详细分析和解决方案。 一、Vue Router 传参方式 Vue Router 提供了多种传参方式，以下是其中两种： 1. 通过 params 传参 在 Vue Router 中，可以使用 `$router.push` 方法传递参数，例如： ```javascript this.$router.push({ name: '模块名称', params: { // 各参数 } }) ``` 在路由配置文件 `router.js` 中，可以使用 `params` 属性来接收参数： ```javascript export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', component: ParamsMode } ] } ] }) ``` 2. 通过 query 传参 除了使用 `params` 之外，还可以使用 `query` 来传递参数，例如： ```javascript this.$router.push({ name: '模块名称', query: { // 各参数 } }) ``` 二、解决刷新页面参数丢失问题 在上面的示例代码中，我们使用 `params` 传递参数，但是当刷新页面时，参数会丢失。这是因为 `params` 是通过 URL 传递的，刷新页面时 URL 不变，但是参数会被清空。 为了解决这个问题，我们可以使用 `localStorage` 或者 `sessionStorage` 来存储参数，然后在刷新页面时，从存储中读取参数。 例如，在 `ParamsPassingByRouter.vue` 中，我们可以使用 `localStorage` 来存储参数： ```javascript export default { data() { return { testData: { id: '20180101', name: '张三', aka: 'z3', age: '18' } } }, methods: { paramsMode(data) { localStorage.setItem('params', JSON.stringify(data)) this.$router.push({ name: 'paramsMode', params: data }) } } } ``` 然后，在 `ParamsMode.vue` 中，我们可以从存储中读取参数： ```javascript export default { data() { return { testData: {} } }, created() { const params = localStorage.getItem('params') if (params) { this.testData = JSON.parse(params) } } } ``` 这样，当刷新页面时，我们可以从存储中读取参数，并显示正确的数据。 Vue Router 传递参数可以使用 `params` 或 `query`，但是需要解决刷新页面参数丢失问题，可以使用 `localStorage` 或 `sessionStorage` 来存储参数。