Vue-Router — это официальная библиотека маршрутизации Vue.js.
По словам авторов, Vue Router
«Выразительная, настраиваемая и удобная маршрутизация для Vue.js»
Сегодня в этом хорошо объясненном и легком для понимания блоге я хочу использовать вашу кривую обучения, познакомив вас с необходимыми функциями Vue Router, то есть с вложенными именованными представлениями.
Мы выберем общий вариант использования для нашей иллюстрации. Чтобы продолжить, вам нужно настроить проект Vue.js v3.
Я использую vite для создания своего первоначального проекта vue.
#npm v7+ npm create vite@latest vuerouter -- - template vue
После создания начальной структуры проекта запустите:
npm install
для установки всех зависимостей. После этого откройте проект в своем любимом редакторе кода, я использую код Visual Studio, затем перейдите к папке src внутри корневой папки вашего проекта.
очистить все внутри, main.js и app.vue. Также не стесняйтесь удалять файл style.css, который вам не понадобится для этой иллюстрации.
Теперь пришло время запачкать руки.
Сначала мы создадим новый каталог и назовем его views, вы можете назвать его как угодно. Внутри папки представлений для нашего примерного проекта мы создадим следующие файлы:
Мы будем использовать файл index.js для экспорта всех файлов .vue внутри папки представлений.
Давайте создадим наш первый экран. Перейдите к файлу app.vue и добавьте этот фрагмент кода, не стесняйтесь копировать и вставлять, так как это базовый файл vue.
<template>
<h1>
Vue Router Nested Named Views
</h1>
</tempate>
<script>
export default {
name: "App"
}
</script>
В файл main.js добавьте следующий код:
import {createApp} from 'vue';
import App from './App.vue';
const app = createApp(App)
app.mount('#app')
Мы будем использовать встроенный терминал vscode для этого примера проекта. В терминале выполните следующую команду, чтобы запустить приложение vue.
npm run dev
Перейдите в свой браузер и введите URL-адрес вашего терминала в адресную строку браузера. Наслаждайтесь тем, что вы видите.
Далее нам нужно установить библиотеку vue-router с помощью следующей команды:
npm install vue-router
Теперь давайте настроим наши маршруты. В папке src создайте файл, я назову его router.js, вы можете назвать его как угодно, если оно имеет смысл для вас.
Мы добавим следующий код в файл router.js:
import { createRouter, createWebHashHistory } from 'vue-router';
import { Settings, Email, Subscription, Profile, ChangeProfile, ViewProfile } from './views'
const routes = [
{
path: '/settings',
component: Settings,
name: 'settings',
children: [
{
path: 'email',
components: {default: Email, subscriptions: Subscription},
name: 'email',
},
{
path: 'profile',
components: {
default: Profile,
changeProfile: ChangeProfile,
viewProfile: ViewProfile
},
name: 'profile'
}
]
}
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export { router };
Здесь мы импортируем два метода из библиотеки vue-router, методы createRouter и createWebHasHistory.
createRouter — создает экземпляр Router, который может использоваться приложением Vue.
createWebHashHistory — дает URL-адрес `https://example.com/folder#`
Мы также импортируем файлы, созданные в папке views, из файла index.js внутри папки views. Мы также определили массив маршрутов — маршруты — это массив объектов, который должен включать следующие свойства;
путь — строка, указывающая сегмент URL.
component —компонент Vue, содержимое которого должно отображаться при переходе к этому сегменту URL. Объекты маршрутов могут иметь другие необязательные свойства, такие как имя, дочерние элементы и т. д.
Мы создаем маршрут с path, /settings и используем компонент Settings. У этого маршрута есть дочерние маршруты, т. е. электронная почта и профиль, которые мы собираемся использовать для отображения именных маршрутов — Subscription, ChangeProfile, ViewProfile.
Обратите внимание, что мы отображаем несколько представлений, а безымянный маршрут принимает имя по умолчанию — . В объекте компонентов ключи становятся именами представления, а отображаемые компоненты — значениями.
В завершение мы создадим маршрутизатор с помощью метода createRouter и экспортируем его.
Давайте пойдем и изменим наш файл main.js, чтобы он выглядел так:
import {createApp} from 'vue';
import App from './App.vue';
import {router} from './router';
const app = createApp(App).use(router);
app.mount('#app')
Мы только импортировали маршрутизатор и указали нашему приложению использовать только что созданный маршрутизатор.
Внутри папки views создайте нечто подобное для всех файлов .vue, кроме Settings.vue.
<template>
<div>
view profile
</div>
</template>
<script>
export default {
name: "ViewProfile",
}
</script>
измените текст между div, чтобы он соответствовал каждому имеющемуся у вас файлу.
Теперь мы собираемся добавить следующий код в файл Settings.vue:
<template>
<div class="grid">
<sidebar class="sidebar">
<h1>Settings</h1>
<div class="side-nav">
<router-link to="/settings/email">Email</router-link>
<router-link to="/settings/profile">Profile</router-link>
</div>
</sidebar>
<main class="main">
<router-view name="subscriptions"></router-view>
<router-view name="changeProfile"></router-view>
<router-view name="viewProfile"></router-view>
</main>
</div>
</template>
<script>
export default {
name: 'Settings',
}
</script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0 !important;
}
.grid {
display: grid;
grid-template-columns: 4fr 8fr;
grid-gap: 20px;
}
.main {
background-color: #fff;
}
.sidebar {
background-color: #1c2e4a !important;
color: #fff;
display: flex !important;
flex-direction: column;
/* justify-content: center; */
padding-top: 28px ;
align-items: center;
height: 100vh;
}
.side-nav{
margin: 16px 0 0 0;
}
a{
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
font-size: 24px
}
</style>
Мы разделяем наш экран на боковую панель и основной раздел.
Затем мы добавляем навигационные ссылки в раздел боковой панели, чтобы помочь нам перейти к указанным сегментам URL-адресов. Для этого мы используем router-link.
router-link — позволяет пользователям перемещаться между различными представлениями в одностраничном приложении Vue.js (SPA). Мы указываем путь для перехода с помощью атрибута «to».
В основном разделе мы хотим отобразить содержимое представлений имен.
Чтобы отобразить несколько представлений, мы будем использовать более одного компонента ‹router-view›.
‹router-view›: визуализирует компонент, соответствующий текущему URL-маршруту.
Если атрибут имени не указан, отображается представление по умолчанию. чтобы отобразить определенное представление, мы дали им имена, и мы будем отображать их, используя их имена в качестве значения атрибута name.
ПРИМЕЧАНИЕ. Я не буду объяснять раздел стилей, так как он состоит из основных правил CSS для макета страницы. Не стесняйтесь копировать и вставлять как есть.
Наконец, давайте изменим наш файл App.vue, чтобы он выглядел следующим образом.
<template>
<router-view></router-view>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Vue'
}
}
}
</script>
Перейдите в свой браузер и обновите вкладку, на которой вы ввели ссылку, и подтвердите, видите ли вы такой экран:
Если вы не видели что-то близкое к этому, пожалуйста, не стесняйтесь начать читать этот блог с самого начала и никогда не уставать, пока не сделаете это правильно.
До скорого …
