0

我已经设置了一个route应该vue-router 4根据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 在登录/注销后分析路由并加载正确的组件？

4

1 回答 1

1

要让多条路线使用相同的路径，最好的办法是使用命名视图。您可以为您的索引定义默认组件，或/作为您的组件的路径，同时有条件地选择在您的模板中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" />

你可以在这个代码框里看到这个

于 2021-10-02T15:01:04.033 回答