Роутинг с vue-router на VueJS3

Установка и начальная настройка vue-router на VueJS3

В этой шпаргалке мы рассматриваем работу 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>

Перейти ко второй части. 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены