Vue.js) vue-router 설정 방법

	//vue-router설정
	/**
	* 1. main.js 설정
	* path: frontend/src/main.js
	*/
	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	createApp(App).use(router).mount('#app')
	/******************************************************************/
	/**
	* 2. app.vue 설정
	* path: /frontend/src/App.vue
	*/
	<template>
	<router-view></router-view>
	<!-- :~~<- 붙일때는 무조건 붙여서 사용해야한다. -->
	</template>
	<script>
	export default {
	name: "App",
	components: {},
	};
	</script>
	<style scoped>
	</style>
	/******************************************************************/
	/**
	* 3. index.js 설정
	* 3.1 router폴더 생성
	* path: frontend/src/router /index.js
	*/
	import {createRouter, createWebHistory} from 'vue-router'
	import Home from '../views/Home'
	import notHome from '../views/notHome'
	import e404 from '../views/e404'
	const routes = [
	{
	path:'/',
	name:'Home',
	component: Home
	},
	{
	path:'/nothome',
	name: 'nothome',
	component: notHome
	},
	{
	path:'/:pathMatch(.*)',
	name: 'e404',
	component: e404
	}
	]
	const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	//history: createWebHashHistory(),
	routes,
	})
	export default router

view raw gistfile1.txt hosted with ❤ by GitHub