vue - router

npm install vue-router@4

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: '/경로',
    component: List,
  },
  {
    path: '/경로',
    component: 위에서 import 해온 컴포넌트
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router; 


// main.js
import router from './router'
createApp(App).use(router).mount('#app') 



페이지 이동 링크를 만들고 싶으면 

/list 페이지로 이동하는 버튼을 만들고 싶으면 원하는 곳에 이벤트 달아주기

@click="$router.push('/경로/경로')"

뒤로가기 =  @click="$router.go(-1)"


원하는 곳에 <router-view></router-view> 를 추가

App.vue의 HTML내부 아무데나 저 태그를 추가해주면

라우터로 구분된 페이지를 그 자리에 보여줌

--------------------------------------------
세부 페이지를 보여주고 싶으면 

  {
    path: '/경로',
    component: List,
    children : [
     {
      path : "/",
      component : ""
     }
    ]
  },

결과 : /경로/children의 path