[Vue.js] router 사용하여 페이지 이동하기

🟡 /list 로 접속했을 때 List.vue를 보여주고 싶다면 어떻게 해야할까?

🔸 src>router.js 파일 생성하고, router 설정하기

import { createWebHistory, createRouter } from "vue-router";
import List from './components/List.vue'; 			<- (1) List.vue import하기

const routes = [
  {
    //path: "/경로",
    //component: import해온 컴포넌트,
    
    path: "/list",									<- (2) path
    component: List,							<- (3) import해온 component 
  }
  {
  	path: "/"
    component: Home,
  }
];

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

export default router; 

🔸 main.js로 router 파일 import 해오기

//main.js

import {} from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import '라우터만든거' from './router.js'  <- router import해오기

createApp(App).use(라우터만든거).mount('#app')  <- use 부분에 import한거 넣어주기

🔸 어디에서 보여줄 것인가? -> App.vue

//App.vue
<template>
	<div>
    	<h5>React 개발자의 블로그입니다</h5>
        <p>Vue로 만드는 중</p>
    </div>
    <List :블로그글="블로그글"/>    
    

<-- 이 부분에 router를 넣어봅시다! -->

</template>
<script>
import List from './components/List.vue' 
import blog from './assets/blog.vue'  			<- (3-1) export한 blog import하기

export default { 
	name: 'App',
    data(){ 									<-(1) data() 만들기
    	return {
        	블로그글 : blog                        <-(3-2) 데이터에 저장
        }
    }
    components: {
    	List,
    }
}
</script>
<style>
</style>   

//App.vue
<template>
	<div>
    	<h5>React 개발자의 블로그입니다</h5>
        <p>Vue로 만드는 중</p>
    </div>
    <List :블로그글="블로그글"/>
    
    <router-view></router-view>       	<- 라우터로 설정한 컴포넌트를 보여 줄 자리
    <router-view :블로그글="블로그글"></router-view> <- 만약 props 전달하고 싶다면 이렇게 하면 된다
</template>
<script>
import List from './components/List.vue' 
import blog from './assets/blog.vue'  			

export default { 
	name: 'App',
    data(){ 									
    	return {
        	블로그글 : blog                        
        }
    }
    components: {
    	List,
    }
}
</script>
<style>
</style>   

🟡 router-link

//App.vue
<template>
	<div>
    	<h5>React 개발자의 블로그입니다</h5>
        <p>Vue로 만드는 중</p>
    </div>
    
    
    <router-link to="/">Home</router-link>
    <router-link to="/list"></router-link>
     
    <router-view :블로그글="블로그글"></router-view>
</template>
<script>
import List from './components/List.vue' 
import blog from './assets/blog.vue'  			

export default { 
	name: 'App',
    data(){ 									
    	return {
        	블로그글 : blog                        
        }
    }
    components: {
    	List,
    }
}
</script>
<style>
</style>