Рубрики
Без рубрики

Vue-маршрутизатор: навигация приложений Vue.js

Автор оригинала: Lucas Otero.

Вступление

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

Объект маршрутизатора имеет определенные методы, прикрепленные к нему, что поможет вам перенаправить ваше приложение к желаемому 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-маршрутизатора Отказ