巧用Vue Router传递参数，有效避免页面刷新参数丢失

2023-10-14 14:47:48

一、理解Vue Router参数传递

在Vue Router中，参数传递有两种常见的方式：

查询字符串参数（query string parameters）：

使用此方法，参数附加到URL的末尾，以问号 (?) 开头，参数名和参数值之间用等号 (=) 分隔，多个参数用与号 (&) 连接。例如，如果要将id参数的值传递给详情页面，可以使用以下URL：
```
/detail-page?id=123
```
路径参数（path parameters）：

路径参数直接嵌入到路由路径中，使用冒号 (:) 作为前缀。例如，如果要在详情页面的URL中包含id参数，可以使用以下路由路径：
```
/detail-page/:id
```

当使用路径参数时，参数值可以通过$route.params对象访问。例如，在详情页面组件中，可以使用以下代码访问id参数的值：

this.$route.params.id

二、解决刷新页面参数丢失问题

在某些情况下，我们可能会遇到页面刷新后参数丢失的问题。这是因为，当页面刷新时，浏览器会重新加载页面，而不会保留之前传递的参数。为了解决这个问题，我们可以使用以下几种方法：

使用keep-alive组件：

keep-alive组件可以缓存页面组件的状态，从而在页面刷新后保持组件的状态。要使用keep-alive组件，可以在路由配置中将该组件包裹在要缓存的组件周围。例如：
```
{
  path: '/detail-page',
  component: {
    template: '<keep-alive><DetailPage /></keep-alive>'
  }
}
```
使用sessionStorage或localStorage：

sessionStorage和localStorage是浏览器提供的两个存储机制，可以存储数据。我们可以使用sessionStorage或localStorage来存储参数值，并在页面刷新后从存储中检索参数值。例如：
```
sessionStorage.setItem('id', 123);

const id = sessionStorage.getItem('id');
```
使用URL哈希（hash）：

URL哈希是URL的一部分，以#号开头。我们可以使用URL哈希来存储参数值，并在页面刷新后从哈希中检索参数值。例如：
```
window.location.hash = '#id=123';

const id = window.location.hash.split('=')[1];
```