VueJS - Маршрутизация: Начальный гид по навигации в вашем приложении Vue

Здравствуйте, будущие мастера Vue! Сегодня мы отправимся в увлекательное путешествие по миру маршрутизации Vue. Представьте себе маршрутизацию как GPS вашего приложения Vue - она помогает вашим пользователям navigieren с одной страницы на другую, не перезагружая весь веб-сайт. Круто, правда? Давайте окунемся!

Что такое маршрутизация Vue?

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

Vue Router - это официальный маршрутизационный модуль для Vue.js. Он позволяет вам map компоненты к различным URL-путям, создавая平滑кий опыт одностраничного приложения.

Настройка Vue Router

Сначала установим Vue Router. Откройте ваш терминал и выполните:

npm install vue-router

Теперь создадим базовую маршрутизационную настройку:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

const router = new VueRouter({
routes
})

export default router

В этой настройке мы импортируем Vue и VueRouter, затем говорим Vue использовать VueRouter. Мы определяем наши маршруты в массиве, где каждый маршрут - это объект, указывающий путь, имя и компонент для отрисовки.

Использование Router-Link и Router-View

Теперь, когда у нас настроены маршруты, как их использовать? Введите <router-link> и <router-view>.

Router-Link

<router-link> - это компонент, который позволяет пользователям navigieren между страницами. Это как усиленный <a> тег. Вот как его использовать:

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> - это место, где происходит магия. Это компонент, который отображает содержимое маршрута, соответствующего текущему URL. Представьте его как placeholder, где будут отрисовываться ваши компоненты.

Свойства для Router-Link

Router-Link предоставляет несколько свойств, которые позволяют вам customize его поведение. Давайте посмотрим на некоторые из самых распространенных:

Свойство	Описание	Пример
to	Указывает целевой маршрут	<router-link to="/about">About</router-link>
replace	Переходит без добавления новой записи в историю	<router-link to="/about" replace>About</router-link>
append	Добавляет путь к текущему пути	<router-link to="child" append>Child</router-link>
tag	Указывает, какой тег использовать для отрисовки компонента	<router-link to="/about" tag="li">About</router-link>
active-class	Класс для применения, когда ссылка активна	<router-link to="/about" active-class="active">About</router-link>
exact	Точно соответствовать маршруту	<router-link to="/" exact>Home</router-link>

Программная навигация

Иногда вам может понадобиться navigieren изнутри вашего JavaScript кода. Vue Router предоставляет методы для этого:

// Перейти на страницу About
this.$router.push('/about')

// Вернуться назад
this.$router.go(-1)

// Заменить текущую запись в истории
this.$router.replace('/about')

Динамическое соответствие маршрута

Часто нам нужно map маршруты с одним и тем же компонентом, но с разными параметрами. Например, страница профиля пользователя, где ID пользователя является частью URL. Мы можем достичь этого с помощью динамических сегментов в пути:

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

В этом примере :id - это динамический сегмент. Вы можете получить доступ к нему в вашем компоненте через this.$route.params.id.

Вложенные маршруты

По мере роста вашего приложения, вам может понадобиться nesting компоненты внутри друг друга. Vue Router делает это легко:

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Эта настройка позволяет использовать URL-адреса, такие как /user/123/profile и /user/123/posts.

Навигационные заграждения

Последнее, но не менее важное, давайте поговорим о навигационных заграждениях. Это хуки, предоставляемые Vue Router, чтобы protect navigieren, перенося или отменяя их. Они как охранники вашего приложения, контролирующие, кто может зайти, а кто нет.

Вот пример простого глобального заграждения перед навигацией:

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

Это заграждение проверяет, аутентифицирован ли пользователь, перед тем как позволить навигацию на любой маршрут, кроме 'Login'.

И вот оно,folks! Мы прошли через основы маршрутизации Vue, от настройки маршрутов до их охраны. Помните, что практика делает мастера, поэтому не бойтесь экспериментировать с этими концепциями в своих проектах. Счастливого кодирования, и пусть ваши маршруты всегда приведут вас туда, куда вы хотите!

Credits: Image by storyset