Блог

Главная - Вопросы по программированию - Как я могу обновлять маршрут каждый раз, когда к нему обращаются в маршрутизаторе Vue 4?

Как я могу обновлять маршрут каждый раз, когда к нему обращаются в маршрутизаторе Vue 4?

#vue.js #vue-router #vuejs3 #vue-router4

Вопрос:

Я настроил 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-маршрутизатор проанализировать маршрут после входа/выхода из системы и загрузить правильный компонент?

Комментарии:

1. Лучшим решением, чем динамические компоненты (особенно корневой компонент, который загружается первым), является использование комбинации мета-полей маршрутизатора и навигации по маршруту.

2. @Sensanaty Я не хочу, чтобы URL-адрес менялся с / «сказать /personal «. Я хочу, чтобы вид изменился на том же маршруте / .

3.В этом случае вы можете использовать именованные представления и просто переключаться между двумя маршрутами с помощью v-if <router-view v-if="loggedIn" name="Personal" /> <router-view v-else name="Public" />

4. @Sensanaty Это то, что я пытаюсь сделать в этой routes[] части, но поскольку путь не меняется, я не получаю перезагрузку маршрута. Обновил свой вопрос, добавив больше кода.

5. Вы неправильно понимаете, как работают именованные представления. Я привел здесь краткий пример, который вы можете проверить, который демонстрирует, как вы можете достичь этого с помощью именованных представлений. Обратите внимание, что определение маршрутизатора components является множественным числом, а не единственным.

Ответ №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" />

Вы можете увидеть это в этом кодовом поле

Метки: ,