как перейти на другую страницу в vue?

Question

Всем привет. Я новичок в frontend и пытаюсь изучить vue. Хочу написать сайт для заметок. Подскажите, как мне просто перейти на другую страницу? Хочу из главной страницы перейти на страницу создания заметки. Для этого обрабатываю событие клик и в функции использую window.location.href = 'полный путь к фалу', но в консоли ошибка Notes.vue:53 Not allowed to load local resource

Answer 1

Ознакомься с SPA (Single Page Application) и используй vue router. У него для маршрутизации есть готовые методы. Пример использование метода useRouter из vue-router (Перед этим нужно создать ):

<template>
<button @click="router.push('/example')" />
</template>
<script>
import { useRouter } from 'vue-router';

const router = useRouter()
</script>

Пример приложения использующего vue-router:

import { createApp } from 'vue'
/* Это методы vue-router */
import { createRouter, createWebHistory } from 'vue-router';

/* Это компоненты твоих страниц */
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

/* Тут объявляешь маршруты для страниц */
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

/* Тут ты их инициализируешь */
const router = createRouter({
  history: createWebHistory(),
  routes, 
})

const app = createApp()
/* Тут ты его подключаешь к приложению */
app.use(router)

app.mount('#app')

Answer 2

Советую ознакомиться с VUE-ROUTER. Вот ссылка на один из лучших гайдов по vue на всём РУ ютубе как по мне (Это комплексный гайд, поэтому очень советую с ним ознакомиться):

https://youtu.be/XzLuMtDelGk?si=YqmSzd_MB1nTvhkx&t=7128

Тайм код с объяснением VUE-ROUTER: 1:58:30

БЛОГ НА HUSL

как перейти на другую страницу в vue?

Ответы (2 шт):