每次在 Vue Router 4 中访问路由时，如何刷新路由？答案

【问题标题】：How can I refresh a route every time it is accessed in Vue Router 4?每次在 Vue Router 4 中访问路由时，如何刷新路由？
【发布时间】：2021-11-23 17:38:03
【问题描述】：

我在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 在登录/注销后分析路由并加载正确的组件？

【问题讨论】：

比动态组件（尤其是首先加载的根组件）更好的解决方案是结合使用router meta fields & route navigation guards
@Sensanaty 我不希望 URL 从 / 更改为 /personal。我希望在/ 的同一条路线上改变视图。
在这种情况下，您可以使用 named views 并使用 v-if <router-view v-if="loggedIn" name="Personal" /> <router-view v-else name="Public" /> 在两条路线之间简单地切换
@Sensanaty 这就是我在routes[] 部分中尝试做的事情，但由于路径没有改变，我没有重新加载路线。用更多代码更新了我的问题。
您误解了命名视图的工作原理。我制作了一个简单的示例here，您可以查看它，演示如何使用命名视图实现此目的。请注意，路由器components 的定义是复数，而不是单数。

标签： vue.js vue-router vuejs3 vue-router4

【解决方案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看到这个

【讨论】：