● router 사용법
src/router/index.js
더보기
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'Home', component: () => import('../pages/index.vue')},
{ path: '/todos', name: 'Todos', component: () => import('../pages/todos/index.vue')}
]
})
// 1-/home, 2-/todos, 3-/todos/create 4-/todos/:id
export default router
main.js
더보기
import App from './App.vue'
import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import router from './router';
// Optional, since every component imports their Bootstrap functionality
// the following line is not necessary
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App)
app.use(BootstrapVue3)
app.use(router)
app.mount('#app')
app.vue
더보기
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-2 justify-content-start">
<router-link class="navbar-brand" to="/">
Kossie Coder
</router-link>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<router-link class="nav-link" to="/todos">
Todos
</router-link>
</li>
</ul>
</nav>
<router-view />
</template>
<script>
export default {
}
</script>
<style>
</style>
router-link 는 dom 접근이 아님,,
a링크가 dom이 refresh되는거임.
'FRONT > VUE' 카테고리의 다른 글
[vue3] 자바스크립트 객체 복사/비교 (0) | 2024.04.24 |
---|---|
[vue3] 이벤트 버블링 이란? (0) | 2024.04.24 |
[vue3] computed, watchEffect, Watch 사용법 (0) | 2024.04.23 |
[vue3] props, emit 사용법 (0) | 2024.04.22 |
[vue3] ref, reactive 사용법 (0) | 2024.04.20 |