Главная
Публикации на тему JavaScript
Основы Vue.js - Маршрутизация и навигация

Основы Vue.js - Маршрутизация и навигация

Внимание

Данный материал является частью цикла статей «Основы Vue.js». Не забудьте посмотреть другие статьи по этой теме :-)

В предыдущей статье мы установили и натсроили проект на Vue.js и мы готовы реализовать в нем некоторые функции. Но прежде чем мы начнем создавать новый функционал, мы собираемся создать навигацию, чтобы иметь возможность перемещаться по нашему приложению. У нас в приложении уже есть vue-router, и мы собираемся использовать его для создания новых маршрутов и подключения его к компонентам.

Для стилизации использовать наших компонентов мы будем использовать библиотеку Bootstrap.

Установка сторонней библиотеки

Давайте навигации терминала к корню нашего приложения, и введите: npm i bootstrap-vue. После этого мы собираемся уведомить Vue.js об использовании Bootstrap, а затем Vue.jsфайл зарегистрирует для нас все компоненты Bootstrap. Мы также собираемся импортировать стили.

Для этого откроем main.jsфайл и изменим его:

import Vue from 'vue';
import App from './App';
import router from './router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.config.productionTip = false;

Vue.use(BootstrapVue);

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

Vue.use() - это функция, которая используется для установки плагинов vue. Это вызовет installфункцию внутри плагина. В этом случае функция Vue.use() запустит функцию install внутри плагина BootstrapVue, и эта функция зарегистрирует для нас все компоненты Bootstrap.

Создание компонента для панели навигации

Теперь создадим новый файл с именем Navbar.vue в директории src/components. На нашей навигационной панели у нас будет три ссылки:

Ссылка на домашнюю страницу
Ссылка на действия владельца
Ссылка на действия аккаунта

Итак, создадим файл Navbar.vue

<template>
  <b-navbar
    toggleable="md"
    type="dark"
    variant="info">
    <b-navbar-brand href="#">Account-Owner Home</b-navbar-brand>
    <b-navbar-nav>
      <b-nav-item href="#">Owner Actions</b-nav-item>
      <b-nav-item href="#">Owner Actions</b-nav-item>
    </b-navbar-nav>
  </b-navbar>
</template>
<script>
export default {
  name: 'Navbar'
};
</script>

В настоящее время наши ссылки не указывают на какое-либо место, поэтому мы используем знак #, потому что мы еще не создали маршруты и компоненты. Давайте создадим маршрут и компонент для нашей домашней страницы, а затем снова отредактируем этот файл, чтобы использовать фактический маршрут.

Создание маршрутов и компонентов

Откроем файл routes/index.js:

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);


export default new Router({
routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }]
});

Это тот же компонент HelloWorld, что и в конце предыдущей статьи. Мы собираемся удалить его и создать наш первый компонент, Home.vue а затем проложить маршрут, который будет отображать этот компонент. Итак, начнем с компонента.

Создание нового компонента

Мы собираемся создать файл Home.vue в каталоге components и изменить его:

<template>
  <p class="homeText">
    WELCOME TO ACCOUNT-OWNER APPLICATION
  </p>
</template>
<script>
export default {
  name: 'Home'
};
</script>
<style scoped>.homeText{
    font-size: 35px;
    color: red;
    text-align: center;
    position: relative;
    top:30px;
    text-shadow: 2px 2px 2px gray;
}
</style>

Создание нового маршрута

Откроем файл routes/index.js и изменим его:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
Vue.use(Router);


export default new Router({
routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    }]
});

Теперь нам нужно включить нашу навигационную панель где-нибудь в нашем проекте. Откроем файл App.vue. В этом файле мы собираемся удалить сгенерированный инструментом vue-cli шаблон из предыдущей статье, а также удалить логотип и стили Vue.js. Затем мы собираемся импортировать наш компонент Navbar и зарегистрировать его, чтобы мы могли использовать его в качестве тега в шаблоне. Мы также будем использовать Bootstrap как можно чаще, поэтому мы собираемся заменить наш основной тег div на b-container.

Итак, давайте изменим файл App.vue:

<template>
  <b-container id="app">
    <b-row>
      <b-col>
        <navbar/>
      </b-col>
    </b-row>
    <b-row>
      <b-col>
        <router-view/>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import Navbar from '@/components/Navbar';

export default {
    name: 'App',
    components: { Navbar }
};
</script>

Давайте снова откроем файл Navbar.vue и добавим к ссылке Account-Owner Home реальный маршрут:

<b-navbar-brand :to="{ name: 'Home' }">Account-Owner Home</b-navbar-brand>

Вы могли заметить странный параметр :to и объект JSON рядом с ним. Вот как мы передаем некоторые данные нашим компонентам, и вы узнаете об этом больше в следующих статьях.

Запустим приложение и проверим результаты:

Отлично!

Но что, если кто-то перейдет по несуществующему URL, например http://localhost:8080/#/whatever? Когда это происходит, нам нужно отобразить компонент NotFound. Давайте реализуем это.

Создание компонента NotFound

Мы собираемся создать маршрут catch all, который будет запускаться, когда ни один из наших маршрутов не будет совпадать.

Сначала создадим компонент NotFound.vue. В этом srcкаталоге мы собираемся создать новый каталог с именем error-pages. Мы собираемся разместить там наш компонент NotFound.vue, который показывает только сообщение page is not found в этом каталоге.

Вот как выглядит файл NotFound.vue:

<template>
  <p>
    404 SORRY COULDN'T FIND IT!!!
  </p>
</template>
<script>
export default {
  name: 'NotFound'
};
</script>
<style scoped>
p {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    color:#f10b0b;
}
</style>

Теперь мы собираемся открыть routes/index.jsи добавить

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import NotFound from '@/components/error-pages/NotFound';

Vue.use(Router);


export default new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '*',
            name: 'NotFound',
            component: NotFound
        }
    ]
});

Давайте проверим результат, перейдя по ссылке: http://localhost:8080/#/whatever

Последнее, что мы сделаем, это изменим режим маршрутизации с hash mode на history mode. Это позволит нам удалить #из URL. Режим истории полагается на API браузера history.pushState и дает нам возможность перемещаться без символа # в URL-адресе. Маршрутизатор Vue.js будет использовать хэш-режим в качестве запасного варианта, если браузер не поддерживает history.pushState.

Откроем файл routes/index.js и добавим еще один параметр в конструктор Router:

...
export default new Router({
  mode: 'history',
  routes: [
...

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