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.