[vue3] router-view 사용법

 

 

● 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되는거임.