Vue Router 4: навигация и guards

1npm install vue-router@4

1import { createRouter, createWebHistory } from 'vue-router';
2import Home from './views/Home.vue';
3
4const routes = [
5  { path: '/', name: 'Home', component: Home },
6  { path: '/about', name: 'About', component: () => import('./views/About.vue') },
7];
8
9const router = createRouter({
10  history: createWebHistory(),
11  routes,
12});
13
14export default router;

1import { createApp } from 'vue';
2import App from './App.vue';
3import router from './router';
4
5createApp(App).use(router).mount('#app');

1const routes = [
2  { path: '/users/:id', name: 'User', component: User },
3];

1<script setup>
2import { useRoute } from 'vue-router';
3
4const route = useRoute();
5const userId = route.params.id;
6</script>

1// URL: /search?query=vue&page=1
2const route = useRoute();
3const query = route.query.query;
4const page = route.query.page;

1<script setup>
2import { useRouter } from 'vue-router';
3
4const router = useRouter();
5
6function goToUser(id) {
7  router.push({ name: 'User', params: { id } });
8}
9
10function goBack() {
11  router.back();
12}
13</script>

1router.push('/new-page'); // добавляет в историю
2router.replace('/new-page'); // заменяет текущую запись

1router.beforeEach((to, from) => {
2  const isAuthenticated = checkAuth();
3  if (to.meta.requiresAuth && !isAuthenticated) {
4    return { name: 'Login' };
5  }
6});

1const routes = [
2  {
3    path: '/dashboard',
4    component: Dashboard,
5    meta: { requiresAuth: true },
6    beforeEnter: (to, from) => {
7      // проверка перед входом в маршрут
8    },
9  },
10];

1<script setup>
2import { onBeforeRouteLeave } from 'vue-router';
3
4onBeforeRouteLeave((to, from) => {
5  if (hasUnsavedChanges.value) {
6    return confirm('Есть несохранённые изменения. Уйти?');
7  }
8});
9</script>

1const routes = [
2  {
3    path: '/dashboard',
4    component: DashboardLayout,
5    children: [
6      { path: '', component: DashboardHome },
7      { path: 'settings', component: Settings },
8      { path: 'profile', component: Profile },
9    ],
10  },
11];

1<template>
2  <div class="dashboard">
3    <Sidebar />
4    <main>
5      <RouterView />
6    </main>
7  </div>
8</template>

1const routes = [
2  {
3    path: '/admin',
4    component: () => import(/* webpackChunkName: "admin" */ './views/Admin.vue'),
5  },
6];

1// Предзагрузка при hover
2const Admin = () => import('./views/Admin.vue');
3
4// Предзагрузка по условию
5if (needsAdmin) {
6  Admin();
7}

1const router = createRouter({
2  history: createWebHistory(),
3  routes,
4  scrollBehavior(to, from, savedPosition) {
5    if (savedPosition) {
6      return savedPosition;
7    }
8    if (to.hash) {
9      return { el: to.hash, behavior: 'smooth' };
10    }
11    return { top: 0 };
12  },
13});

1const routes = [
2  {
3    path: '/dashboard',
4    components: {
5      default: Dashboard,
6      sidebar: Sidebar,
7      header: Header,
8    },
9  },
10];

1<template>
2  <div>
3    <RouterView name="header" />
4    <RouterView name="sidebar" />
5    <RouterView />
6  </div>
7</template>

1const routes = [
2  {
3    path: '/admin',
4    component: Admin,
5    meta: {
6      requiresAuth: true,
7      title: 'Админка',
8      roles: ['admin'],
9    },
10  },
11];

1router.beforeEach((to) => {
2  document.title = to.meta.title || 'Моё приложение';
3});