В этой шпаргалке мы рассматриваем работу vue-router на VueJS3.
Устанавливаем в свой проект vue-router через npm если при создании проекта этого не сделано. На store не обращаем внимание это для VueX.
main.js
/* jshint ignore:start */
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App)
.use(store)
.use(router)
.mount('#app')
Теперь создадим в нашем проекте страницы, для этого в папке views (или page) создадим два файла home.vue и about.vue.
home.vue и about.vue
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script></script>
Так же создаем новый файл в папке src - router.js, который будет содержать наши роутеры (пути).
router.js
import {createRouter, createWebHistory} from "vue-router"
import home from "@/views/home.vue"
import about from "@/views/about.vue"
export default createRouter ({
history: createWebHistory(),
routes: [
{
path: "/",
component: home
},
{
path: "/about/",
component: about
}
]
})
И для вывода страниц в приложении укажем в App.vue место куда нужно выводит компоненты-страницы строкой - <router-view></router-view>.
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
Для примера создания навигации, мы возьмем bootstrap меню и создадим в нем две ссылки, для перемещения по страницам без перезагрузки самой страницы нам нужно вместо тега "а" воспользоваться специальным тегом vue-router - router-link как показано в примере ниже.
App.vue
<template>
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about/">About</router-link>
</li>
</ul>
</div>
</div>
</nav>
<router-view></router-view>
</div>
</template>
Для того, что бы обозначить активную ссылку во Vue-Router v.4 делается так:
App.vue
<template>
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<router-link v-slot="{ navigate, isActive }" to="/" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>Home</a>
</li>
</router-link>
<router-link v-slot="{ navigate, isActive }" to="/about" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>About</a>
</li>
</router-link>
</ul>
</div>
</div>
</nav>
<router-view></router-view>
</div>
</template>
Рассмотрим работу и организацию ссылок на примере.
App.vue
<template>
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- <li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about/">About</router-link>
</li> -->
<router-link v-slot="{ navigate, isActive }" to="/" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>Home</a>
</li>
</router-link>
<router-link v-slot="{ navigate, isActive }" to="/about" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>About</a>
</li>
</router-link>
<router-link v-slot="{ navigate, isActive }" to="/post/6/" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>Post 6</a>
</li>
</router-link>
<router-link v-slot="{ navigate, isActive }" to="/post/7/" custom>
<li class="nav-item" role="link" @click="navigate">
<a
class="nav-link"
:class="[isActive && 'active']"
:active="isActive"
href=""
>Post 7</a>
</li>
</router-link>
</ul>
</div>
</div>
</nav>
<router-view></router-view>
</div>
</template>
home.vue
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script></script>
about.vue
<template>
<div>
<h1>About Page</h1>
<br>
<ul>
<router-link
v-for="post in 5"
:key="post"
:to="'/post/' + post"
>
<li>
<p>Post {{ post }}</p>
</li>
</router-link>
</ul>
</div>
</template>
<script></script>
В about.vue показано как можно циклом создать динамические ссылки.
post.vue
<template>
<div>
<h1>POST: {{ id }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
}
},
watch: {
$route(toRoute) {
this.id = toRoute.params.id
}
}
}
</script>
В post.vue показано как мы выводим параметры и отслеживаем параметры router.
router.js
/* jshint ignore:start */
import {createRouter, createWebHistory} from "vue-router"
import home from "@/views/home.vue"
import about from "@/views/about.vue"
import post from "@/views/post.vue"
export default createRouter ({
history: createWebHistory(),
routes: [
{
path: "/",
component: home
},
{
path: "/about/",
component: about
},
{
path: "/post/:id",
component: post
}
]
})
В router.js мы добавляем путь с переменной id, которая может носить любое наименование, не обязательно id.
Сделаем возврат на страницу всех постов применив для этого программную навигацию. Создадим для этой цели кнопку "Back".
post.vue
<template>
<div>
<h1>POST: {{ id }}</h1>
<button class="btn btn-sm btn-info" @click="goBackToPosts">Back</button>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
}
},
watch: {
$route(toRoute) {
this.id = toRoute.params.id
}
},
methods: {
goBackToPosts() {
this.$router.push("/about/")
}
}
}
</script>