每次访问 Vue Router 4 时如何刷新路由？

Question

我在 vue-router 4 中设置了一个 route，它应该根据用户是否登录动态加载 component。我是这样做的（可能有更好的方法？）：

import Personal from '../views/Personal.vue';
import Public from '../views/Public.vue';
routes: [
    {
        path: '/',
        component: async () => {
            const isLoggedIn = await authenticateUser();
            if (isLoggedIn == true) {
                return Personal
            } else {
               return Public
            }
        }
    }
]

App.vue 文件是这样的：

<template>
  <div id="app">
      <Site-Header></Site-Header>
          <router-view></router-view>
    <Site-Footer></Site-Footer>
  </div>
</template>

问题在于，如果用户从路径为 '/' 的主页路由登录，他不会离开该路由。相反，我希望 vue-router 只加载 Personal 组件。

Personal 和 Public 之间的切换似乎只有在我用力刷新页面时才有效，否则不会发生任何变化。因此，如果用户登录，他们仍然会看到 Public.vue 组件，然后在页面刷新后他们会看到 Personal.vue 组件。如果他们随后注销，他们仍然会看到 Personal.vue 组件，直到他们刷新页面。

如何强制 vue-router 在 log-in/log-out 之后分析路由并加载正确的组件？

Answer 1

要让多条路线使用同一路径，最好的办法是使用 Named Views。您可以为索引定义默认组件，或将 / 路径定义为 Public 组件，同时在模板中使用 v-if 有条件地选择不同的组件。

您可以将路线定义为：

routes: [
  {
    components: {
      default: Public,
      Personal: Personal
    },
    name: "index",
    path: "/"
  }
]

重要的是要注意这里的语法不同。这里的 component 字段必须复数才能使其工作，因此它必须是 components.

然后在调用视图的根模板中，您可以使用简单的 v-if 在它们之间切换，具体取决于用户是否登录。您如何存储该信息取决于您，因此只需调整以下代码以反映您自己的应用程序的逻辑

<!-- The default is Public, so you don't have to provide the name here -->
<router-view v-if="!user.loggedIn" />
<router-view v-else name="Personal" />

你可以在这个codesandbox

中看到

每次访问 Vue Router 4 时如何刷新路由？

How can I refresh a route every time it is accessed in Vue Router 4?

vue.js

vue-router

vuejs3

vue-router4