路由守卫如何带上一个页面的数据数据
时间: 2024-10-11 20:11:11 浏览: 11
路由守卫(也称为路由器钩子)通常在Vue.js应用中用于控制路由权限、验证用户身份等操作。如果需要在跳转到一个新的页面时携带一些数据,可以使用`meta`属性来传递自定义信息,这个信息不是直接绑定在组件上,而是作为导航选项的一部分。
例如,在你的`router.beforeEach`或`router.afterEach`守卫中:
```javascript
import router from '@/router'
router.beforeEach((to, from, next) => {
// 假设你有一个全局需要随路由变化的数据
const userData = localStorage.getItem('currentUser')
// 添加数据到每个页面的meta属性
to.meta.userData = userData
// 然后在组件内部通过this.$route.meta获取
next()
})
```
然后在目标组件的生命周期钩子里或者`created`、`mounted`等生命周期函数中访问:
```vue
<template>
<div>
<h1>User Data: {{ $route.meta.userData }}</h1> <!-- 在这里展示数据 -->
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.meta.userData)
}
}
</script>
```
阅读全文