Abr@X@bra.ru
Маршрутизация Vue.js с помощью vue-router
Маршрутизация Vue.js с помощью vue-router

Маршрутизация Vue.js с помощью vue-router

03.07.2017
1242

Если ваши приложения Vue.js 2 увеличиваются и состоят из нескольких разделов, то маршрутизация становится основной частью вашего проекта. Давайте рассмотрим, как вы можете использовать Vue core package vue-router для реализации маршрутизации в своем веб-приложении.

Настройка проекта Vue.js 2

Я используем Vue CLI для создания нового проекта Vue.js. Если вы еще не установили Vue CLI в своей системе, вы должны сначала выполнить установку, используя следующую команду:

$ npm install -g vue-cli

После успешного завершения установки новая команда vue станет доступной. Вы можете использовать эту команду для инициирования нового проекта Vue следующим образом:

$ vue init webpack vue-router-01

Вам задают несколько вопросов в командной строке, чтобы завершить создание проекта. Один из вопросов спрашивает, хотите ли вы добавить в проект vue-router. Ответьте Y (да), чтобы убедиться, что пакет маршрутизатора Vue добавлен к первоначальной настройке проекта.

Затем вам нужно перейти на вновь созданную папку проекта:

$ cd vue-router-01

И завершите установку зависимостей, выполнив следующую команду:

$ npm install

Теперь веб-сервер разработки можно запустить:

$ npm run dev

Установка пакета vue-router

Если вы настраиваете свой проект с помощью Vue CLI, как показано, пакет vue-router будет добавлен в ваш проект автоматически.

Если вы хотите добавить пакет vue-router вручную в свой проект, вы можете сделать это, используя команду npm следующим образом:

$ npm install vue-router —save

Добавить vue-router в наше приложение

Если вы выполнили последние шаги и добавили vue-router в первоначальную конфигурацию с помощью Vue CLI, маршрутизация будет активирована по умолчанию. Активация происходит в файле src / router / index.js:

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({

routes: [

  {

    path: '/',

    name: 'Hello',

    component: Hello

  }

]

})

Первый маршрутизатор импортируется из пакета vue-router через оператор импорта. Затем вам нужно его вызвать Vue.use (Router).

Настройка маршрутов

Конфигурация маршрута по умолчанию уже включена в файл src / router / index.js. Конфигурация маршрута представляет собой объект JavaScript, состоящий из трех путей свойств, имени и компонента. Объект конфигурации добавляется к массиву. Массив должен быть присвоен свойству route объекта, который передается конструктору Router.

Как видно из приведенного выше списка, экземпляр Router создается и экспортируется. Чтобы активировать конфигурацию маршрутизатора, экземпляр Router импортируется в файл src / main.js:

import router from './router'

Экземпляр Router затем используется для создания экземпляра приложения Vue, как вы можете видеть в следующем:

Стандартные маршруты

Стандартные маршруты легко определить. Конфигурация маршрута по умолчанию является типичным примером стандартного маршрута:

{

    path: '/',

    name: 'Hello',

    component: Hello

  }

Путь маршрута определяется с помощью свойства path. Установка значения этого свойства в '/' означает, что это маршрут по умолчанию вашего приложения. Если приложение работает на localhost: 8080, например, маршрут по умолчанию активируется, когда пользователь обращается к http: // localhost: 8080 в браузере.

Маршруты с параметрами

Давайте добавим второй объект конфигурации маршрута в массив:

export default new Router({

routes: [

  {

    path: '/',

    name: 'Hello',

    component: Hello

  },

  {

    path: '/firstroute/:name',

    name: 'FirstRoute',

    component: FirstRoute

  }

]

})

Для новой конфигурации маршрута используется значение пути '/ firstroute /: name'. Последняя часть строки пути определяет параметр маршрутизации: name. Параметр маршрутизации позволяет передать значение компоненту маршрута по URL-адресу, например:

http://localhost:8080/firstroute/bob

В этом случае значением параметра маршрутизации имени является bob. Доступ к параметру можно получить в компоненте маршрута FirstRoute. Давайте создадим новый файл src / components / FirstRoute.vue и вставим код:

<template>

 <div>

   <h1>{{ msg }}</h1>

     Hello {{ $route.params.name }}

 </div>

</template>

<script>

export default {

  name: 'firstroute',

  data () {

    return {

    msg: 'FirstRoute'

  }

}

}

</script>

Ввод результатов маршрута

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

<router-view></router-view>

В нашем приложении Vue этот элемент уже помещен в код шаблона компонента App (в файле src / App.vue), как вы можете видеть в следующем примере:

<template>

 <div id="app">

   <img src="./assets/logo.png">

   <router-view></router-view>

 </div>

</template>

Если теперь вы пытаетесь получить доступ к FirstRoute в браузере, вы должны увидеть выход компонента FirstRoute.

Дочерние маршруты

Также можно определить дочерние маршруты. Давайте рассмотрим следующую расширенную конфигурацию маршрутизатора:

export default new Router({

 routes: [

   {

     path: '/',

     name: 'Hello',

     component: Hello

   },

   {

     path: '/firstroute/:name',

     name: 'FirstRoute',

     component: FirstRoute,

     children: [

       {

         path: 'child',

         component: FirstRouteChild

       }

     ]

   }

 ]

})

Имущество свойств добавлено в объект конфигурации FirstRoute. Свойству присваивается массив с содержимым другого объекта конфигурации маршрута для маршрута FirstRouteChild. Давайте также реализуем FirstRouteChild. Создайте новый файл FirstRouteChild.vue в папке src / components и вставьте следующий код:

<template>

<div>

  <h1>{{ msg }}</h1>

</div>

</template>

<script>

export default {

name: 'firstroutechild',

data () {

  return {

    msg: 'FirstRouteChild'

  }

}

}

</script>

Связь с маршрутами

Пользователь может получить доступ к маршруту, введя соответствующий URL-адрес в браузере напрямую. Если вы хотите добавить ссылки на URL маршрута, вы можете использовать элемент <router-link> для автоматического создания ссылки HTML:

<router-link to="/route-one/route-one-child">Link to route one, child one</router-link>

Атрибут to содержит путь к маршруту. Вы также можете использовать двоеточие до атрибута, чтобы иметь возможность назначить динамическое выражение:

<router-link :to="myRouteTargetString">Link to dynamic route</router-link>

Чтобы связать три маршрута, которые доступны в нашем приложении, мы меняем реализацию компонента App в файле App.vue:

<template>

<div id="app">

  <img src="./assets/logo.png">

  <div>

    <ul>

      <li><router-link to="/">Home</router-link></li>

      <li><router-link to="/firstroute/Sebastian">FirstRoute</router-link></li>

      <li><router-link to="/firstroute/Sebastian/child">FirstRouteChild</router-link></li>

    </ul>

  </div>

  <router-view></router-view>

</div>

</template>

<script>

export default {

name: 'app'

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

</style>

Теперь конечный результат должен выглядеть следующим образом:


Нажимая на ссылку FirstRoute, вид изменяется, чтобы включить вывод компонента FirstRoute без перезагрузки страницы:


Щелчок по ссылке FirstRouteChild изменяет представление, и отобразит содержимое компонента FirstRouteChild в дополнению к компоненту FirstRoute:





Vue.js, Vue-router
Читайте также:
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать
Vue.js наступает на пятки React и Angular

Vue.js наступает на пятки React и Angular

Какая магия Vue.js заставляет его завоевывать сердца разработчиков? Давай выясним!
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать