Маршрутизация Vue.js с помощью vue-router
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Если ваше приложение Vue.js 2 становится больше и состоит из нескольких представлений, маршрутизация становится основной частью вашего проекта. Давайте посмотрим, как вы можете использовать базовый пакет Vue 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
Теперь веб-сервер разработки можно запустить, введя: < br /> $ 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 } ] })
Сначала Router импортируется из пакета vue-router с помощью оператора импорта. Затем вам нужно вызвать
Vue.use(Router)
Настройка маршрутов
Конфигурация маршрута по умолчанию уже включена в файл src / router / index.js. Конфигурация маршрута - это объект JavaScript, состоящий из трех свойств: path, name и component. Объект конфигурации добавляется в массив. Массив необходимо присвоить свойству routes объекта, которое передается конструктору Router.
Как вы можете видеть в листинге выше, экземпляр Router создан и экспортирован. Чтобы активировать конфигурацию маршрутизатора, экземпляр маршрутизатора импортируется в файл src / main.js: import router from './router'
Затем экземпляр маршрутизатора используется для создания экземпляра приложения Vue, как вы можете см. следующее:
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Стандартные маршруты
Стандартные маршруты легко определить. Конфигурация маршрута по умолчанию является типичным примером стандартного маршрута:
{
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
В этом случае значение параметра маршрутизации name - 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-вывод компонентов маршрута должен быть частью вывода браузера. Следующий элемент-заполнитель используется для определения места на 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
}
]
}
]
})
Свойство children было добавлено в объект конфигурации 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 содержит путь к маршруту. Вы также можете использовать двоеточие перед атрибутом 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:
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
ОНЛАЙН-КУРС: Vue.js: от новичка до профессионала
Посмотрите отличный онлайн-курс Бо Андерсена по Vue.js с более чем 15 часами видеоконтента.
Vue.js: от новичка к профессионалу
- Понять теорию Vue.js и то, как она работает под капотом
- Как управлять состоянием в больших приложениях Vue с помощью Vuex
- Используйте современные инструменты для разработки и создания приложений Vue (например, webpack)
