Router

Подключение:

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'import router from './router'  import App from './App.vue'  const app = createApp(App)  app.use(router)  app.mount('#app')

Роуты:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createRouter, createWebHistory } from 'vue-router'  import Main from '@/pages/Main.vue'import Card from '@/pages/Card.vue'import Product from '@/pages/Product.vue'  const router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  routes: [    { path: '/', component: Main },    { path: '/card', component: Card },    { path: '/product/:id', component: Product },  ],})  export default router

Подключение в App.vue:

1
2
3
4
5
6
7
<script setup lang="ts">import { RouterView } from 'vue-router'</script>  <template>  <RouterView /></template>

Для роутов используется RouterLink

1
<RouterLink to="/">Go to Home</RouterLink>

или router.push

1
2
3
4
5
6
7
8
9
<script setup lang="ts">import { useRouter } from 'vue-router'  const router = useRouter()</script>  <template>  <Button @click="router.push('/')" label="Go to Home" /></template>