vue路由拦截登录后跳转到指定页面 参数没了
时间: 2023-09-09 14:01:19 浏览: 65
Vue路由拦截器是用来在用户访问特定页面之前对其进行身份验证的。在登录成功后,我们可以在路由拦截器中获取用户参数,并将其存储在Session Storage或Local Storage中以供后续使用。这样,即使在跳转到指定页面时丢失了参数,我们仍然可以从存储中获取并传递给目标页面。
以下是一个示例代码,用于登录后跳转到指定页面并传递参数:
在登录成功后,将参数存储在Storage中:
```
// 登录成功后获取参数
let params = {
username: 'John',
age: 25
};
// 存储参数
sessionStorage.setItem('params', JSON.stringify(params));
```
在路由拦截器中,从Storage中获取参数并传递给指定页面:
```
// 路由拦截器
router.beforeEach((to, from, next) => {
// 获取存储的参数
let params = JSON.parse(sessionStorage.getItem('params'));
// 判断是否存在参数
if (params) {
// 将参数添加到跳转的URL中
next({ path: to.path, query: params });
} else {
next();
}
});
```
在指定页面中,接收并使用参数:
```
// 指定页面
export default {
created() {
// 获取参数
let params = this.$route.query;
// 使用参数
console.log(params.username); // 输出:John
console.log(params.age); // 输出:25
}
}
```
通过以上代码,即使在跳转到指定页面时丢失了参数,我们仍然可以获取并使用之前存储的参数。这样就解决了参数丢失的问题。