Vue Router 4 находится на стадии бета-тестирования и может быть изменен.

Чтобы легко создать одностраничное приложение, нам нужно добавить маршрутизацию, чтобы URL-адреса были сопоставлены с компонентами, которые отображаются.

В этой статье мы рассмотрим, как использовать Vue Router 4 с Vue 3.

Навигационная охрана

Мы можем добавить средства навигации для защиты навигации, перенаправив или отменив ее.

Охранники срабатывают только тогда, когда мы перемещаемся по разным маршрутам.

Изменения параметров URL и запроса не приводят к включению или отключению средств навигации.

Global Before Guards

Мы можем добавить global before guard, передав обратный вызов методу router.beforeEach.

Например, мы можем написать:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/foo">foo</router-link>
        <router-link to="/bar">bar</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = {
        template: "<div>foo</div>"
      };
      const Bar = {
        template: "<div>bar</div>",
        props: ["id"]
      };
      const routes = [
        {
          path: "/foo",
          component: Foo
        },
        {
          path: "/bar",
          component: Bar
        }
      ];
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });
      router.beforeEach((to, from, next) => {
        console.log(to, from);
        next();
      });
      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

Мы вызываем метод router.beforeEach с обратным вызовом.

Обратный вызов принимает параметры to, from и next.

to - объект маршрута, к которому выполняется навигация.

from - объект маршрута, от которого выполняется навигация.

Объект маршрута имеет fullPath, метаданные, параметры запроса, параметры URL и многое другое.

next - это функция, которая должна быть вызвана для разрешения перехвата.

Нам нужно вызвать next, чтобы показать маршрут to.

Функция next может принимать аргумент.

Если мы перейдем к false, текущая навигация будет прервана.

Если URL-адрес браузера изменится, он будет сброшен на тот, который указан в маршруте from.

Мы также можем передать строку пути или объект со свойством path со строкой пути.

В любом случае мы перенаправляем в другое место.

Текущая навигация прерывается, и начинается новая.

У объекта могут быть дополнительные параметры, такие как свойства replace и name из маршрута.

Принимаются любые свойства, одобренные router.push.

Мы также можем передать экземпляр Error, если есть какие-либо ошибки.

Тогда навигация будет прервана, и ошибка будет передана обратным вызовам, зарегистрированным с router.onError().

Мы должны убедиться, что next вызывается ровно один раз в обратном вызове.

В противном случае навигация может никогда не разрешиться или могут возникнуть ошибки.

Итак, вместо того, чтобы писать:

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' })
  }
  next()
})

Мы пишем:

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' });
  }
  else {
    next();
  }
})

Стражи глобальной решимости

Мы можем зарегистрировать глобального охранника с router.beforteResolve.

Он похож на router.beforeEach, но вызывается непосредственно перед подтверждением навигации.

Заключение

Мы можем добавить средства навигации для управления навигацией с помощью Vue Router 4.