Вступление

Vue-Router - это пакет JavaScript, который позволяет настроить маршрутизацию для одностраничных приложений (SPA).

SPA относится к веб-приложению, которое обслуживает только одну index.html и динамически отображает контент, что, скорее всего, является способом настройки современных JavaScript-фреймворков, таких как React.js или Vue.js.

Зачем использовать Vue-Router?

Использование SPA имеет множество преимуществ, но одним из основных недостатков является то, что все компоненты веб-страницы доставляются, добавляются или удаляются с помощью JavaScript без загрузки дополнительных HTML-страниц с сервера. В этом суть SPA, но главная проблема заключается в возможности перемещаться по «страницам», к которым пользователи привыкли на большинстве веб-сайтов.

Вот тут-то и вступает в игру Vue-Router!

Установка и настройка

Если вы используете Vue CLI , возможно, вы уже сталкивались с ситуацией, когда вас спрашивают, хотите ли вы включить Vue-Router в конфигурацию проекта.

Vue-Router можно легко установить с помощью предпочитаемого вами менеджера пакетов, будь то NPM или Yarn :

 $ npm install vue-router 
 OR 
 $ yarn add vue-router 

Это добавит vue-router в ваш 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: '<App/>' 
 }) 

Файл router.js: создание маршрутов

Во - первых , нам нужно импортировать router из пакета Вью-маршрутизатора и добавить его в Vue в качестве плагина с методом use .

После этого мы рассматриваем роутер как объект, который будет содержать все маршруты. И, конечно же, мы должны экспортировать его, чтобы остальная часть приложения могла получить к нему доступ.

 import Vue from 'vue' 
 import Router from 'vue-router' 
 
 Vue.use(Router) 
 
 export default new Router({ 
 routes: [] 
 }) 

Свойство routes - это массив, который будет содержать объекты, каждый из которых будет конкретным маршрутом для вашей веб-страницы. Самый простой будет выглядеть так:

 const Home = { template: '<div>Welcome to Stack Abuse!</div>' } 
 routes: [ 
 { 
 path: '/', 
 name: 'Home', 
 component: Home 
 } 
 ] 

Vue-Router принимает множество свойств для маршрутизируемых объектов:

• path : это относительный путь к базовому маршруту вашего веб-приложения, на котором вы хотите, чтобы определенный компонент отображался.

• name : свойство name будет полезно при ссылке на этот конкретный объект внутри ваших компонентов Vue.

• component : с этим свойством компонент Vue будет вставлен в назначенный вами путь маршрута.

• redirect : компонентный маршрут может быть перенаправлен на другой маршрут при совпадении.

• alias : очень похож на перенаправление, но всякий раз, когда вы вводите путь псевдонима, маршрутизатор будет показывать корневой путь маршрутизатора.

1

<!-- -->

 const router = new VueRouter({ 
 routes: [ 
 { 
 path: '/users', 
 component: Users, 
 alias: '/alias' // When entering '/alias' the content of the component Users will render 
 } 
 ] 
 }) 

• children : это массив с большим количеством маршрутов, которые будут объединены с путем, при этом родительский путь останется в URL-адресе.

1

<!-- -->

 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 
 } 
 ] 
 } 
 ] 
 }) 

• params : это свойства или определенная информация, которую можно передать компоненту.

• meta : всякий раз, когда маршрут (или несколько маршрутов) сопоставляется с путем, свойство meta будет доступно. Это особенно полезно при использовании средств навигации.

Мы также можем добавить свойство mode к объекту Router По умолчанию Vue-Router настроен на hash , что означает, что все URL-адреса будут иметь # в конце. Это можно удалить, как вы, скорее всего, захотите, установив для свойства mode history :

 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-Router, вам необходимо передать <router-view> внутри компонента Vue.

Вы также можете получить доступ к маршрутам из <a> , но это вызовет повторную визуализацию страницы, чтобы избежать такого поведения, вы можете использовать router-link со свойством to href . Этот специальный тег указывает маршрутизатору перейти на данную «страницу».

 <template> 
 <div> 
 <h3> Vue Router - Stack Abuse </h3> 
 <h4> { $router.params.id } </h4> 
 <button @click="goBack"> Go Back </button> 
 <router-view></router-view> 
 <router-link :to="/users"> Users Route </router-link> 
 </div> 
 </template> 
 
 export default { 
 methods: { 
 goBack () { 
 this.$router.go(-1) 
 } 
 } 
 } 

К объекту маршрутизатора прикреплены определенные методы, которые помогут вам перенаправить ваше приложение на нужный URL:

• $router.go() : принимает число в качестве параметра, который относится к количеству позиций, на которые вы хотите перейти вперед или назад в массиве стека истории браузера.

• $router.push() : эта функция может принимать строку, относящуюся к имени или пути маршрута, к которому вы хотите получить доступ, или к объекту с конфигурацией маршрута.

1

<!-- -->

 router.push( 
 { 
 name: 'users' 
 params: { id: 1 } 
 } 
 ) 

• $router.replace() : почти то же самое, что и push, вместо добавления новой записи в стек истории браузера он заменяет текущую на ту, которую мы добавляем.

Маршрутная охрана

Большинству приложений нужен способ запретить доступ к определенным маршрутам. Это легко сделать с помощью средств защиты маршрута, о которых мы говорили ранее, когда говорили о meta .

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

• beforeEach : Конечно , самые полезным при необходимости глобального охранника , чтобы держать пользователь из зоны ограниченного доступа, вы можете настроить функцию обратного вызова , которая будет получать to , from , next с beforeEach функции , которая позволяет узнать, где вы навигация с, и до, а также следующий шаг, который необходимо предпринять:

1

<!-- -->

 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') 
 } 
 } 
 }) 

• beforeEnter : запускается до того, как пользователь войдет в определенный маршрут.

• afterEach : вызывается всякий раз, когда навигация для каждого маршрута была успешной.

Заключение

Vue-Router - обязательный инструмент, если вы создаете какие-либо одностраничные приложения Vue.js, он дает вам гибкость для управления навигацией пользователя в полной мере.

Вы всегда можете получить дополнительную информацию, посетив официальную страницу Vue-Router .