{"blocks":[{"type":"paragraph","data":{"text":"Практика использования официальной библиотеки для маршрутизации в Vue — Vue router. О том, как настраивать маршрутизацию в React Router, рассказали здесь."}},{"type":"expertLegacy","data":{"id":"1084"}},{"type":"paragraph","data":{"text":"С появлением веб-приложений пришла потребность в смене URL-адресов с помощью JS. На помощь пришел History API браузера."}},{"type":"paragraph","data":{"text":"Благодаря этому все основные современные фреймворки позволяют программно управлять маршрутизацией с синхронизацией URL-адреса с представлением приложения."}},{"type":"paragraph","data":{"text":"Для маршрутизации во Vue-приложениях можно создать свою собственную интеграцию с History API, но лучше использовать официальную библиотеку от Vue — Vue-Router."}},{"type":"embed","data":{"link":"https://tproger.ru/translations/tools-for-vue-js"}},{"type":"header2","data":{"level":2,"text":"Базовые вещи"}},{"type":"paragraph","data":{"text":"Использование можно начать хоть с установки с CDN:"}},{"type":"paragraph","data":{"text":"<script src="https://unpkg.com/vue-router"></script>"}},{"type":"paragraph","data":{"text":"Но мы начнем сразу с «правильного» варианта — с Vue Cli:"}},{"type":"code","data":{"code":"yarn global add @vue/cli\n\n# ИЛИ\n\nnpm i -g @vue/cli","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"Создадим проект с помощью VUE CLI с базовым шаблоном — Default ([Vue 2] babel, eslint):"}},{"type":"paragraph","data":{"text":"vue create vue-router-test-app"}},{"type":"header2","data":{"level":2,"text":"Минимальная конфигурация"}},{"type":"paragraph","data":{"text":"Добавим роутер:"}},{"type":"code","data":{"code":"yarn add vue-router\n\n# или\n\nnpm i --save vue-router","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"Добавим в Main.js минимальную конфигурацию для роутера:"}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"import Vue from \"vue\";\nimport App from \"@/App.vue\";\nimport VueRouter from \"vue-router\";\nimport HelloWorld from \"@/components/HelloWorld\";\n\nVue.use(VueRouter);\n\nconst routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n];\n\nconst router = new VueRouter({\n routes,\n mode: \"history\",\n});\n\nVue.config.productionTip = false;\n\nnew Vue({\n router,\n render: (h) => h(App),\n}).$mount(\"#app\");","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Роуты представляют собой массив, каждый элемент которого — объект, где требуется указать path и component."}},{"type":"paragraph","data":{"text":"Чтобы увидеть изменения надо вывести компонент роутера — routerView, который отвечает за отображение. Для этого изменим App.vue:"}},{"type":"paragraph","data":{"text":"/src/App.vue"}},{"type":"paragraph","data":{"text":"Теперь, зайдем на http://localhost:8080/. Увидим страницу с маршрутом «/», где отображается компонент HelloWorld.vue, вместо тега router-view, который мы писали в App.vue."}},{"type":"header2","data":{"level":2,"text":"Иерархия путей"}},{"type":"paragraph","data":{"text":"Добавим маршрут в main.js (массив routes):"}},{"type":"code","data":{"code":"const routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\"]),\n },\n },\n];","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Зайдем по адресу http://localhost:8080/board. Увидим вторую страницу с отображением рендер-функции."}},{"type":"header2","data":{"level":2,"text":"Параметры (Props) маршрута"}},{"type":"paragraph","data":{"text":"Поправим дочерний маршрут для маршрута /board в main.js. Для дочерних компонентов надо указывать где в родительском компоненте отображать дочерние — компонентом router-view. В нашем случае — это в рендер-функция:"}},{"type":"code","data":{"code":"import Board from \"@/components/Board\";\nconst routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n children: [\n {\n path: '/board/:id',\n component: Board,\n }\n ]\n },\n];","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Напомню, что рендер-функция в template-представлении будет выглядеть следующим образом:"}},{"id":"9bad0bc1-2812-456c-ad5c-516885c51d2e","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Создадим компонент Board.vue с содержимым:"}},{"type":"paragraph","data":{"text":"/src/components/Board.vue"}},{"type":"code","data":{"code":"export default {\n computed: {\n id() {\n return this.$route.params.id;\n },\n },\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Перейдем по адресу http://localhost:8080/board/21 и увидим родительский и дочерний компоненты Board с передачей параметра id равным 21."}},{"type":"paragraph","data":{"text":"Параметры маршрута доступны в компоненте по this.$route.params."}},{"type":"paragraph","data":{"text":"Если хотим более явно отобразить зависимость компонента от входных параметров, используем настройку props: true при настройке маршрута:"}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"children: [\n {\n path: '/board/:id',\n component: Board,\n props: true,\n }\n]","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"А в компоненте Board.vue принять id как входной параметр компонента:"}},{"type":"paragraph","data":{"text":"/src/components/Board.vue"}},{"type":"code","data":{"code":"export default {\n props: {\n id: {\n type: String,\n default: null,\n },\n },\n};","language":"javascript lazy-code"}},{"type":"header2","data":{"level":2,"text":"Метаданные (meta) маршрута"}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"const routes = [\n {\n path: \"\",\n component: HelloWorld,\n meta: {\n dataInMeta: \"test\",\n },\n },\n ....\n ]","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь мы можем обратиться к метаданным роута из компонента HelloWorld.vue следующим образом:"}},{"type":"paragraph","data":{"text":"this.$route.meta.dataInMeta."}},{"type":"header2","data":{"level":2,"text":"Глубже (nested children)"}},{"type":"paragraph","data":{"text":"В дочерние компоненты можно углубляться до бесконечности (до ограничений сервера)."}},{"type":"paragraph","data":{"text":"Сделаем дочерний роут для дочернего роута."}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"const routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n children: [\n {\n path: \"/board/:id\",\n component: Board,\n props: true,\n children: [\n {\n path: \"child\",\n component: {\n render: function(h) {\n return h(\"div\", [\"I'm Child with prop\", this.propToChild]);\n },\n props: {\n propToChild: {\n type: Number,\n required: true,\n default: null,\n },\n },\n },\n },\n ],\n },\n ],\n },\n];","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Рендер-функция теперь записана обычной функцией, т.к. нужен контекст компонента."}},{"type":"paragraph","data":{"text":"/src/components/Board.vue"}},{"type":"code","data":{"code":"export default {\n props: {\n id: {\n type: String,\n default: null,\n },\n },\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Передаем дочернему компоненту дочернего компонента параметры через компонент router-view как обычному компоненту. Звучит сложно, но интуитивно понятно. И так, спускаем пропсы в дочернем — дочернему дочернего:"}},{"type":"paragraph","data":{"text":"<router-view :prop-to-child="parseInt(id)" />"}},{"type":"header2","data":{"level":2,"text":"Пояснение за Path"}},{"type":"paragraph","data":{"text":"Запись вида path: "child" означает, что мы обращаемся к пути родителя и продолжаем его путь: {parent-route}/child"}},{"id":"9d235d69-4d92-4ba0-863c-ebb4fc469eb4","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Из дочернего компонента можно сослаться на любой другой уровень роута:"}},{"type":"paragraph","data":{"text":"/src/main.js (routes):"}},{"type":"code","data":{"code":"children: [\n {\n path: \"/first-level\",\n ....\n }\n ]","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Эта запись обрабатывает страницу с адресом: http://localhost:8080/first-level."}},{"type":"header2","data":{"level":2,"text":"Шире (несколько router-view)"}},{"type":"paragraph","data":{"text":"Можно использовать несколько router-view в 1 компоненте. Для этого в конфигурации маршрутов (routes) пишем вместо component — components, который принимает объект, где ключ — атрибут name у router-view. Если указать ключ «default», то такой компонент будет отображаться, если router-view безымянный (без атрибута name)."}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"const routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n children: [\n {\n path: \"/board/:id\",\n component: Board,\n props: true,\n children: [\n {\n path: \"child\",\n components: {\n default: { render: (h) => h(\"div\", [\"I'm Default\"]) },\n user: { render: (h) => h(\"div\", [\"I'm User\"]) },\n guest: { render: (h) => h(\"div\", [\"I'm Guest\"]) },\n },\n },\n ],\n },\n ],\n },\n];","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"/components/Board.vue"}},{"type":"code","data":{"code":"export default {\n props: {\n id: {\n type: String,\n default: null,\n },\n },\n data() {\n return {\n isUser: false,\n };\n },\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Перейдем по адресу: http://localhost:8080/board/23/child и увидим небольшой интерактив с переключением активных router-view."}},{"type":"header2","data":{"level":2,"text":"Страница ошибки 404"}},{"type":"paragraph","data":{"text":"Чтобы создать страницу ошибки, достаточно положить в конец списка маршрутов такую конструкцию:"}},{"type":"paragraph","data":{"text":"/src/main.js(routes)"}},{"type":"code","data":{"code":"{\n path: \"*\",\n component: { render: (h) => h(\"div\", [\"404! Page Not Found!\"]) },\n},","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь, при переходе по несуществующему пути (например — http://localhost:8080/mistake), будет выведен компонент ошибки."}},{"type":"paragraph","data":{"text":"Лучше писать в таком виде:"}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"{\n path: \"/page-not-found\",\n alias: '*',\n component: { render: (h) => h(\"div\", [\"404! Page Not Found!\"]) },\n},","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь у нас есть страница с ошибкой, куда мы можем со спокойной совестью переадресовывать пользователей (вдруг когда-нибудь понадобится это делать)."}},{"type":"header2","data":{"level":2,"text":"Защита маршрутов"}},{"type":"paragraph","data":{"text":"Защиту маршрутов осуществляют с использованием метаданных маршрутов и хука beforeEach роутера."}},{"type":"paragraph","data":{"text":"/src/main.js"}},{"type":"code","data":{"code":"import Vue from \"vue\";\nimport App from \"@/App.vue\";\nimport VueRouter from \"vue-router\";\n\nimport HelloWorld from \"@/components/HelloWorld\";\nimport Board from \"@/components/Board\";\n\nVue.use(VueRouter);\n\nconst routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n meta: {\n requiresAuth: true,\n },\n children: [\n {\n path: \"/board/:id\",\n component: Board,\n props: true,\n children: [\n {\n path: \"child\",\n components: {\n default: { render: (h) => h(\"div\", [\"I'm Default\"]) },\n user: { render: (h) => h(\"div\", [\"I'm User\"]) },\n guest: { render: (h) => h(\"div\", [\"I'm Guest\"]) },\n },\n },\n ],\n },\n ],\n },\n {\n path: \"/auth-required\",\n component: { render: (h) => h(\"div\", [\"Auth required!\"]) },\n },\n {\n path: \"/*\",\n component: { render: (h) => h(\"div\", [\"404! Page Not Found!\"]) },\n },\n];\n\nconst router = new VueRouter({\n routes,\n mode: \"history\",\n});\n\nconst isAuthenticated = () => false;\n\nrouter.beforeEach((to, from, next) => {\n if (to.matched.some((route) => route.meta?.requiresAuth)) {\n if (isAuthenticated()) {\n next();\n } else {\n next(\"/auth-required\");\n }\n } else {\n next();\n }\n});\n\nVue.config.productionTip = false;\n\nnew Vue({\n router,\n render: (h) => h(App),\n}).$mount(\"#app\");","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь, при попытке получить доступ к странице, которая требует авторизации, нас перебросит на страницу /auth-required."}},{"type":"header2","data":{"level":2,"text":"Навигация между маршрутами"}},{"type":"header3","data":{"level":3,"text":"Программная навигация"}},{"type":"paragraph","data":{"text":"Программная навигация может вызываться из любого места вашего приложения таким образом:"}},{"type":"paragraph","data":{"text":"$router.push('/dash/23/child')"}},{"id":"403f01c9-38ee-45a2-b4ed-d8172553ade2","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Если мы хотим передать параметры, нам нужно использовать другой подход, основанный на использовании имен роутов."}},{"type":"paragraph","data":{"text":"Укажем имя роуту /board/:id:"}},{"type":"code","data":{"code":"...\n children: [\n {\n path: \"/board/:id\",\n name: 'board',\n component: Board,\n props: true,\n children: [\n ....","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь мы можем передавать параметры:"}},{"type":"paragraph","data":{"text":"$router.push({ name: 'board', params: { id: 100500 }})"}},{"type":"paragraph","data":{"text":"Получим ошибку «Invalid prop: type check failed for prop “id”. Expected String with value “100500”, got Number with value 100500»."}},{"type":"paragraph","data":{"text":"Причина в том, что url — это всегда тип данных String, а мы передали программно id с типом Number. Исправляется это просто: перечислим возможные типы данных в компоненте."}},{"type":"paragraph","data":{"text":"components/Board.vue"}},{"type":"code","data":{"code":"props: {\n id: {\n type: [String, Number],\n default: null,\n },\n},","language":"javascript lazy-code"}},{"type":"header3","data":{"level":3,"text":"Компонент routerLink"}},{"type":"paragraph","data":{"text":"Компонент routerLink позволяет создавать ссылки внутри сайта, которые преобразуются в «нативные» браузерные ссылки (тег <а>):"}},{"type":"paragraph","data":{"text":"<router-link to='/dash/23/child'> Link </router-link>"}},{"type":"paragraph","data":{"text":"К таким ссылкам автоматически могут добавляться классы:"}},{"type":"list","data":{"items":["router-link-exact-active — точное совпадение;","router-link-active — частичное (активен дочерний компонент указанного в атрибуте to роута)."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Чтобы не отображать активный класс родительских, достаточно написать атрибут exact:"}},{"type":"paragraph","data":{"text":"<router-link to='/dash/23/child' exact> Link </router-link>"}},{"type":"paragraph","data":{"text":"Мы можем переопределить создаваемый элемент:"}},{"type":"paragraph","data":{"text":"<router-link tag="button" to='/dash'> Button </router-link>"}},{"type":"paragraph","data":{"text":"К сожалению, в таком случае, классы не проставляются."}},{"type":"paragraph","data":{"text":"Также можем передавать объект:"}},{"id":"2afcdd06-6afc-42cc-b936-e20c44b5632c","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"<router-link :to="{ path: '/dash/23' "> Link </router-link>"}},{"type":"paragraph","data":{"text":"<router-link :to="{ name: 'board', params: { id: 123 } }"> Link </router-link>"}},{"type":"header2","data":{"level":2,"text":"Лучшие практики"}},{"type":"paragraph","data":{"text":"Этот раздел мы посвятим рефакторингу того, что мы написали выше."}},{"type":"paragraph","data":{"text":"Создаем структуру папок для роутера:"}},{"type":"code","data":{"code":"src/router/router.js\nsrc/router/routes.js","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"Перенесем в router.js все, что касается настроек роутера:"}},{"type":"code","data":{"code":"import Vue from \"vue\";\nimport VueRouter from \"vue-router\";\nimport routes from \"/routes\";\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n mode: \"history\",\n base: process.env.BASE_URL,\n});\n\nconst isAuthenticated = () => true;\n\nrouter.beforeEach((to, from, next) => {\n if (to.matched.some((route) => route.meta?.requiresAuth)) {\n if (isAuthenticated()) {\n next();\n } else {\n next(\"/auth-required\");\n }\n } else {\n next();\n }\n});\n\nexport default router;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Перенесем routes.js все, что касается настроек маршрутов."}},{"type":"paragraph","data":{"text":"И сразу заменим импорты на динамические."}},{"type":"paragraph","data":{"text":"Если у Вас уже прописано много роутов, ручное изменение может потребовать много времени. Поможет регулярка:"}},{"type":"paragraph","data":{"text":"^import (\\w+) from (".+")$"}},{"type":"paragraph","data":{"text":"заменить на"}},{"type":"paragraph","data":{"text":"const $1 = () => import(/* webpackChunkName: "$1" */ $2)"}},{"type":"paragraph","data":{"text":"Теперь в Chrome Dev Tools во вкладке Network будет видно когда-какой компонент грузится из сети, а раньше все роуты загружались сразу в 1 мега-бандле."}},{"type":"paragraph","data":{"text":"src/router/routes.js"}},{"type":"code","data":{"code":"const HelloWorld = () => import(/* webpackChunkName: \"HelloWorld\" */ \"@/components/HelloWorld\")\nconst Board = () => import(/* webpackChunkName: \"Board\" */ \"@/components/Board\")\n\nconst routes = [\n {\n path: \"\",\n component: HelloWorld,\n },\n {\n path: \"/board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n meta: {\n requiresAuth: true,\n },\n children: [\n {\n path: \"/board/:id\",\n name: \"board\",\n component: Board,\n props: true,\n children: [\n {\n path: \"child\",\n components: {\n default: { render: (h) => h(\"div\", [\"I'm Default\"]) },\n user: { render: (h) => h(\"div\", [\"I'm User\"]) },\n guest: { render: (h) => h(\"div\", [\"I'm Guest\"]) },\n },\n },\n ],\n },\n ],\n },\n {\n path: \"/auth-required\",\n component: { render: (h) => h(\"div\", [\"Auth required!\"]) },\n },\n {\n path: \"/*\",\n component: { render: (h) => h(\"div\", [\"404! Page Not Found!\"]) },\n },\n];\n\nexport default routes;","language":"javascript lazy-code"}},{"type":"header2","data":{"level":2,"text":"Продвинутые приемы"}},{"type":"paragraph","data":{"text":"Под «продвинутостью» подразумевается «приятность» их использования. К таким приемам можно отнести, например, такие темы как:"}},{"type":"list","data":{"items":["разбиение прав по уровням доступа;","анимацию переходов между страницами;","индикацию загрузки при переходе между роутами;","изменение тайтлов при переходе между роутами;"," плавный скролл по странице при переходе назад;","и т.п."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Итак, обо всем по-порядку."}},{"type":"embed","data":{"link":"https://tproger.ru/translations/developing-app-with-flask-and-vue-js"}},{"type":"header2","data":{"level":2,"text":"Разбиение прав по уровням доступа"}},{"type":"paragraph","data":{"text":"Бывает ситуация, когда у пользователей бывает более двух состояний: не только авторизация, но и другие. Например, платная подписка. С этих пор мы задумываемся про неограниченный уровень разделения прав. Делается это буквально парой десятков строчек кода, но для краткости, удобства и чтобы не изобретать велосипед, мы будем использовать готовую библиотеку. Установим ее:"}},{"type":"paragraph","data":{"text":"yarn add vue-router-middleware-plugin"}},{"type":"paragraph","data":{"text":"Создадим специальные файлы middleware для проверки прав пользователей:"}},{"type":"paragraph","data":{"text":"router/middleware/authMiddleware.js"}},{"type":"code","data":{"code":"const isLoggedIn = () => !!window.localStorage.getItem(\"logged-in\")\n\nconst authMiddleware = async ({ /* to, from to,*/ redirect }) => {\n if (!isLoggedIn()) {\n redirect({\n name: \"login\",\n });\n }\n};\n\nexport default authMiddleware;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"router/middleware/guestMiddleware.js"}},{"type":"code","data":{"code":"const isLoggedIn = () => !!window.localStorage.getItem(\"logged-in\");\n\nconst guestMiddleware = async ({ /* to, from to,*/ redirect }) => {\n if (isLoggedIn()) {\n redirect({ name: \"main\" });\n }\n};\n\nexport default guestMiddleware;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"router/middleware/subscribersMiddleware.js"}},{"type":"code","data":{"code":"const isSubscribed = () => Promise.resolve(!!window.localStorage.getItem(\"has-license\"))\n\nconst subscribersMiddleware = async ({ /* to, from, */ redirect }) => {\n if (!await isSubscribed()) {\n console.log(\"isn't subscribed, redirect to license\")\n redirect({ name: 'license' })\n }\n}\n\nexport default subscribersMiddleware","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В последнем листинге, приведен пример асинхронной проверки, что значит — можно обращаться в actions стора и делать запросы на сервер."}},{"type":"paragraph","data":{"text":"Теперь поставим проверку на авторизацию на все роуты, а затем сделаем исключения для некоторых роутов:"}},{"type":"paragraph","data":{"text":"/src/router/router.js"}},{"type":"code","data":{"code":"import Vue from \"vue\";\nimport VueRouter from \"vue-router\";\nimport routes from \"./routes\";\nimport MiddlewarePlugin from \"vue-router-middleware-plugin\";\nimport authMiddleware from \"./middleware/authMiddleware\";\n\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n routes,\n mode: \"history\",\n base: process.env.BASE_URL,\n});\n\nVue.use(MiddlewarePlugin, {\n router,\n middleware: [authMiddleware],\n});\n\nexport default router;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь разберемся с конкретными маршрутами."}},{"id":"4c6f5fcf-aa61-4554-9213-a9af6d8ada37","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Поработаем над архитектурой нашего приложения, чтобы сделать его более предсказуемым. Сделаем отдельный шаблон Auth.vue и положим его в pages, а компоненты, которые там используются, т.е. в разделе /auth, положим в соответствующий раздел components."}},{"type":"paragraph","data":{"text":"Т.о. получается удобная структура:"}},{"type":"code","data":{"code":"pages\n--Auth.vue\ncomponents\n-- auth\n---- Login.vue\n---- Register.vue\n---- Forgot.vue","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"Создадим вспомогательную функцию для генерации подобных роутов genAuthRoutes."}},{"type":"paragraph","data":{"text":"/src/router/routes.js"}},{"type":"code","data":{"code":"import guestMiddleware from \"./middleware/guestMiddleware\";\nimport authMiddleware from \"./middleware/authMiddleware\";\nimport subscribersMiddleware from \"./middleware/subscribersMiddleware\";\n\nconst MainBoard = () =>\n import(/* webpackChunkName: \"MainBoard\" */ \"@/pages/MainBoard\");\nconst BoardComponent = () =>\n import(\n /* webpackChunkName: \"BoardComponent\" */ \"@/components/board/BoardComponent\"\n );\n\nconst clearAndUpper = (text) => text.replace(/-/, \"\").toUpperCase();\nconst toPascalCase = (text) => text.replace(/(^\\w|-\\w)/g, clearAndUpper);\n\nconst genAuthRoutes = ({ parent, tabs = [] }) => ({\n path: `/${parent}`,\n name: parent,\n component: () => import(/* webpackChunkName: \"auth\" */ \"@/pages/Auth\"),\n redirect: { name: tabs[0] },\n\n children: tabs.map((tab) => {\n const tabPascalCase = toPascalCase(tab);\n return {\n path: tab,\n name: tab,\n component: () =>\n import(\n /* webpackChunkName: \"[request]\" */ `@/components/${parent}/${tabPascalCase}`\n ),\n meta: {\n middleware: {\n ignore: [authMiddleware],\n attach: [guestMiddleware],\n },\n },\n };\n }),\n}); \nconst routes = [\n genAuthRoutes({ parent: \"auth\", tabs: [\"login\", \"register\", \"forgot\"] }),\n {\n path: \"/\",\n name: \"main\",\n component: MainBoard,\n children: [\n {\n path: \"/board\",\n name: \"board\",\n component: {\n render: (h) => h(\"div\", [\"Board Page\", h(\"router-view\")]),\n },\n children: [\n {\n path: \"/board/:id\",\n name: \"board-child\",\n component: BoardComponent,\n props: true,\n children: [\n {\n path: \"child\",\n components: {\n default: { render: (h) => h(\"div\", [\"I'm Default\"]) },\n user: { render: (h) => h(\"div\", [\"I'm User\"]) },\n guest: { render: (h) => h(\"div\", [\"I'm Guest\"]) },\n },\n meta: {\n middleware: {\n attach: [subscribersMiddleware],\n },\n },\n },\n ],\n },\n ],\n },\n {\n path: \"/license\",\n name: \"license\",\n component: {\n render: (h) => h(\"div\", [\"License Page\"]),\n },\n },\n ],\n },\n {\n path: \"/auth-required\",\n name: \"auth-required\",\n component: { render: (h) => h(\"div\", [\"Auth required!\"]) },\n meta: {\n middleware: {\n ignore: [authMiddleware],\n },\n },\n },\n {\n path: \"/*\",\n component: { render: (h) => h(\"div\", [\"404! Page Not Found!\"]) },\n meta: {\n middleware: {\n ignore: [authMiddleware],\n },\n },\n },\n];\n\nexport default routes;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Удаляем глобальную проверку на авторизацию в свойстве ignore и добавляем другую проверку в свойстве attach объекта meta.middleware:"}},{"type":"code","data":{"code":"middleware: {\n ignore: [authMiddleware],\n attach: [guestMiddleware], \n }","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Создадим компоненты"}},{"type":"list","data":{"items":["src/components/auth/Login.vue;","src/components/auth/Register.vue;","src/components/auth/Forgot.vue,"],"style":"unordered"}},{"type":"paragraph","data":{"text":"с типовым шаблоном:"}},{"type":"paragraph","data":{"text":"Также отрефакторим страницу Board, назовем его MainBoard"}},{"type":"paragraph","data":{"text":"/src/pages/MainBoard.vue"}},{"type":"paragraph","data":{"text":"Соответственно, добавляем компоненты в соответствующую категорию в components:"}},{"type":"paragraph","data":{"text":"/src/components/board/BoardComponent.vue"}},{"type":"code","data":{"code":"export default {\n props: {\n id: {\n type: [String, Number],\n default: null,\n },\n },\n data() {\n return {\n isUser: false,\n };\n },\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Осталось отрефакторить главный компонент — App.vue:"}},{"type":"paragraph","data":{"text":"/src/App.vue"}},{"type":"code","data":{"code":"export default {\n data() {\n return {\n loggedIn: !!window.localStorage.getItem(\"logged-in\"),\n hasLicense: !!window.localStorage.getItem(\"has-license\"),\n };\n },\n watch: {\n loggedIn(e) {\n window.localStorage.setItem(\"logged-in\", e ? true : \"\");\n },\n hasLicense(e) {\n window.localStorage.setItem(\"has-license\", e ? true : \"\");\n },\n },\n};\n\n\n\n.links > * {\n margin: 1em;\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь, снимем отметку с «Logged In» и попробуем перейти по маршруту http://localhost:8080/board. Нас незамедлительно переадресует на страницу «auth-required»."}},{"type":"paragraph","data":{"text":"Поставим отметку на «Logged In», снимем с «Has License» и перейдем по маршруту http://localhost:8080/board/33/child. Нас перенесет на страницу license, однако, если снять отметку с «Logged In» и обновить страницу, то мы снова перейдем на страницу «auth-required»."}},{"id":"40cb5b86-d7c7-4f8c-b0cd-0464603ae87a","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Теперь проверим, можно ли зайти на страницу авторизации, когда пользователь уже прошел авторизацию. Поставим отметку «Logged In» и перейдем по адресу http://localhost:8080/auth/register. Нас перебросит на главную страницу."}},{"type":"header2","data":{"level":2,"text":"Анимация переходов между страницами"}},{"type":"paragraph","data":{"text":"Это просто. Оборачиваем главный RouterView компонентом анимации transition и добавляем стили:"}},{"type":"paragraph","data":{"text":"src/App.vue"}},{"type":"code","data":{"code":"...\n.fade-enter-active,\n.fade-leave-active {\n transition-property: opacity;\n transition-duration: 0.25s;\n}\n\n.fade-enter-active {\n transition-delay: 0.25s;\n}\n\n.fade-enter,\n.fade-leave-active {\n opacity: 0;\n}\n

Ошибка в настройках сайта