我在项目中使用 Vue 和 VueRouter(还有 Vuex，但这里不是这种情况(。假设我有 5 个文件：
- main.js - 存储所有组件定义，从中导入它们 外部文件等。
- App.vue - 它是存储的主要组件 所有其他
- 路由.js - 存储所有路由定义
- 登录.vue - 存储登录组件(登录页面(
- 内容.vue - 商店页面 元件
(相当简化的版本，但你肯定明白了(。
现在，如果我打开我的路径"/"，如果我没有登录，它应该将我重新路由到"/login"页面，并在我登录时重新路由到"/content"。这里没什么特别的。 现在我的页面按预期工作(几乎(。如果我在浏览器中输入"/content"，它会尝试使用默认数据(即userId = -1(呈现"/content"组件，然后它会立即将我重定向到"/login"页面。"/内容"仅显示一秒钟。这是我的问题。我想重新路由到"/login"，而无需使用默认数据提前渲染"/content"。
很明显，它试图渲染"/content" - 可能来自缓存或其他东西，但由于重新路由是我在 created(( 中的第一个命令，它不应该 在应用程序组件中挂载/内容组件，但/登录。
知道如何预防它吗？ 我知道我没有附加任何代码，但我希望您没有必要理解问题并建议任何解决方案，因为它需要剪切和简化大量代码。
在你的情况下，我认为你应该使用 vue 路由器的 before每个钩子。 您可以使用路由器中的元字段来指示路径是否需要身份验证，并在 beforeEach 函数中进行处理。
我将给出示例代码。
import Router from 'vue-router';
const router = new Router({
routes: [{
path: '/content',
meta: {
auth: true,
}
}, {
path: '/login',
}]
});
router.beforeEach(async (to, from, next) => {
if (to.matched.some(m => m.meta.auth)) {
// user your authentication function
const isAuth = await getAuthentication;
if (!isAuth) {
next('/login');
}
next();
}
})
如果您的身份验证函数不是异步函数，则应删除异步/等待关键字
除非 API 同时声明您不再经过身份验证，否则路由器将无法通过 beforeEach 方法自行刷新。
即使使用从 API 检索数据的循环方法，该方法也会将它们作为反应数据存储在存储中。
在 Vue中，一切都可以是反应式的，除了 Vue 路由器