vue router

단계별로 글을 적어야 나중에 분리해서 다른 사람에게 알려주기 쉬울것 같아서 중간 정리를 했습니다.

 

가장 쉽게 vue router 이해하기

/src/main.js   ( use(router) 사용 )

  ...

   import router from './router'

   createApp(App).use(router).mount('#app')

   ...

 

/src/App.vue

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

<script>

export default {

  name: 'App',

}

</script>

 

/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import BoardList from '@/views/boards/BoardList.vue'

import BoardDetail from '@/views/boards/BoardDetail.vue'

import BoardForm from '@/views/boards/BoardForm.vue'

const routes = [

  { path: '/', redirect: '/boards' },

  { path: '/boards', name: 'BoardList', component: BoardList },

  { path: '/boards/:id', name: 'BoardDetail', component: BoardDetail },

  { path: '/write', name: 'BoardCreate', component: BoardForm },

  { path: '/edit/:id', name: 'BoardEdit', component: BoardForm }

]

const router = createRouter({

  history: createWebHistory(),

  routes,

})

export default router;

 

각화면 소스경로 '@' 사용 설정

/vue.config.js

const path = require('path')

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  configureWebpack:{

    resolve:{

      alias:{

        '@':path.resolve(__dirname,'src')

      }

   

    }

  }

})

vue 를 처음 사용해본다면 문법적인것은 받아들이면 될 것 같고, react를 해본 사람은 어려운 내용은 없어 보이네요.