router跳转实现删除本地存储
时间: 2024-05-06 17:15:21 浏览: 8
在Router中跳转页面时,可以在跳转前手动删除本地存储。具体实现方法如下:
1. 在需要删除本地存储的页面中,定义一个函数用于删除本地存储,例如:
```javascript
function removeLocalStorage() {
localStorage.removeItem('key');
}
```
2. 在Router中定义路由跳转方法,调用该函数,例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
removeLocalStorage();
next();
}
}
]
})
```
在上述代码中,当路由跳转到`/about`页面时,会先执行`removeLocalStorage`函数删除本地存储,然后再跳转到`/about`页面。
需要注意的是,如果使用了`keep-alive`组件来缓存页面,那么在页面重新加载时,本地存储还会存在。因此,在使用`keep-alive`组件的页面中,需要在`activated`生命周期钩子中手动删除本地存储。例如:
```javascript
export default {
name: 'About',
activated() {
removeLocalStorage();
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)