Вступление
Vue-маршрутизатор Это пакет JavaScript, который позволяет настроить маршрутизацию для приложений одной страницы (SPA).
SPA относится к веб-приложению, которое обслуживает только один index.html
Страница и динамически оказывает контент, являясь таким образом, как современные JavaScript Frameworks, такие как React.js или Vue.js скорее всего настроен.
Зачем использовать Vue-маршрутизатор?
Использование спа-салона имеет много преимуществ, но одно из главных предупреждений заключается в том, что все компоненты веб-страницы поставляются, добавляются или удалены через JavaScript без дополнительных HTML-страниц, которые выбираются с сервера. Это то, о чем SPA все о том, но главная проблема способна перемещаться по «страницам», поскольку пользователи привыкли к большинству веб-сайтов.
Это где Vue-маршрутизатор удары в!
Установка и настройка
Если вы используете Vue CLI, вы, возможно, уже столкнулись с ситуацией, когда вы спрашиваете, хотите ли вы включить Vue-маршрутизатор в конфигурацию проекта.
Vue-маршрутизатор легко установлен, используя ваш предпочтительный менеджер пакетов, будь то NPM или Пряжа :
$ npm install vue-router OR $ yarn add vue-router
Это добавит Vue-маршрутизатор
к вашему Package.json
файл, и вы хороши, чтобы пойти.
Рекомендуется написать маршрутизатор, связанный с кодом внутри отдельного файла под названием Router.js
и добавьте его в приложение Vue внутри main.js
файл:
import Vue from 'vue' import App from './App' import Router from './router // Router being imported Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router: Router, // Router added to the Vue instance components: { App }, template: '' })
Файл Router.js: создание маршрутов
Во-первых, нам нужно импортировать Маршрутизатор
Из пакета Vue-маршрутизатора и добавьте его в виде плагина с методом использовать
Отказ
После этого мы рассматриваем маршрутизатор как объект, который будет держать все маршруты. И, конечно, мы должны экспортировать это, чтобы остальная часть приложения может получить доступ к нему.
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [] })
маршруты
Свойство – это массив, который будет держать объекты, каждый из которых будет определенными маршрутами для вашей веб-страницы. Самый базовый будет выглядеть так:
const Home = { template: 'Welcome to Stack Abuse!' } routes: [ { path: '/', name: 'Home', component: Home } ]
Vue-маршрутизатор принимает обильные свойства для его маршрутизации объектов:
путь
: Это относительный путь к базовому маршруту вашего веб-приложения, где вы хотите, чтобы определенный компонент оказывается включенным.Имя
: Свойство имени будет полезен при обращении к этому конкретному объекту внутри ваших компонентов Vue.Компонент
: С помощью этого свойства Vue компонент будет введен в путь маршрута, который вы назначаете.Перенаправить
: Компонентный маршрут может быть перенаправлен на другой маршрут, когда он соответствует.псевдоним
: Довольно похоже на перенаправить, но всякий раз, когда вы вводите путь псевдонима, маршрутизатор покажет корневой путь маршрутизатора.
const router = new VueRouter({ routes: [ { path: '/users', component: Users, alias: '/alias' // When entering '/alias' the content of the component Users will render } ] })
дети
: Это массив с большим количеством маршрутов, которые будут объединены на путь, когда указывает на родительский путь в URL.
const router = new VueRouter({ routes: [ { path: '/users/', component: Users, children: [ { // when /users/profile gets matched path: 'profile', component: UserProfile }, { // when /users/info gets matched path: 'info', component: UserInfo } ] } ] })
Пармы
: Это свойства или определенная информация, которая может быть передана на компонент.Мета
: Всякий раз, когда по пути (или несколько маршрутов) сопоставляются с пути, Meta Property будет доступно. Это особенно полезно при использовании навигационных гвардей.
Мы также можем добавить Режим
Имущество для Маршрутизатор
объект. По умолчанию Vue-маршрутизатор устанавливается на хеш
Режим, что означает, что все URL будут иметь #
в конце. Это можно удалить, как вы, скорее всего, захотите, установив Режим
недвижимость на История
:
export default new Router({ mode: 'history', routes: [] })
Этот режим приходит с проблемой, хотя. Без надлежащей конфигурации, доступ к примеру, http://localhost: 8080/user/id
, прямо в их браузере приведет к 404 ошибка.
Чтобы исправить это, вам нужно добавить простой заправки на ваш сервер. Если путь не соответствует каких-либо статическим активам, он должен служить тому же index.html
Отказ
Например, если вы хотите настроить режим истории внутри сервера Node.js, это может быть настроено:
const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })
Доступ к маршрутизатору от компонента
Учитывая конкретный компонент, вы можете получить доступ к объекту маршрутизатора с $
нотация для того, чтобы реагировать на ввод пользователя или возможность рендеринга маршрутов в зависимости от определенного состояния.
Чтобы маршруты Vue-маршрутизатора будут отображаться, вам нужно будет пройти <Просмотр маршрутизатора>
тег внутри Vue компонента.
Вы также можете получить доступ к маршрутам из Тег, но это будет вызвать страницу Re-Render, чтобы избежать этого поведения, которую вы можете использовать
Маршрутизатор-ссылка
с к
Собственность вместо href
Отказ Этот специальный тег рассказывает маршрутизатору навигацию на данной «странице».
export default { methods: { goBack () { this.$router.go(-1) } } }Vue Router - Stack Abuse
{ $router.params.id }
Users Route
Объект маршрутизатора имеет определенные методы, прикрепленные к нему, что поможет вам перенаправить ваше приложение к желаемому URL-адресу:
$ Router.go ()
: Принимает номер в качестве параметра, который относится к количеству позиций, которые вы хотите перейти вперед или сзади внутри встроенного массива стека истории браузера.$ Router.push ()
: Эта функция может взять строку, ссылаясь на имя или путь маршрута, который вы хотите получить доступ или объект с конфигурацией маршрута.
router.push( { name: 'users' params: { id: 1 } } )
$ Router.replace ()
: В целом так же, как толкать, а не то, что отличается от добавления новой записи в стек истории браузера, он заменяет текущий с тем, который мы добавляем.
Маршрут
Большинство приложений нуждаются в способе запрещений доступа к определенным маршрутам. Этого можно легко сделать с помощью поперечных гвардейцев, которые мы обсуждали ранее, когда говорили о Мета
имущество.
Каждый маршрут имеет поток разрешения навигации, и есть определенные крючки, которые можно использовать для вашей выгоды.
Rebedeach
Несомненно, самый полезный, когда он нуждается в глобальной охраннике, чтобы держать пользователя из ограниченных областей, вы можете настроить функцию обратного вызова, которая получитк
,от
,Следующий
отRebedeach
Функция, которая позволяет вам знать, где вы навигация, и, как, а также следующий шаг, чтобы взять:
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.auth)) { if (!userIsLoggedIn) next('/') console.log('Not allowed here') } else { next('/secret-endpoint') } } })
foreterner
: Запускается до того, как пользователь вступает в определенный маршрут.ДОПОЛЮЧЕНИЕ
: Это вызывается всякий раз, когда навигация успешна для каждого маршрута.
Заключение
Vue-маршрутизатор Является ли обязательным инструментом, если вы создаете какие-либо приложения для одной страницы Vue.js, это дает вам гибкость для управления навигацией пользователя в полной мере.
Вы всегда можете получить больше информации, посещающую Официальная страница Vue-маршрутизатора Отказ