[ Vue ] Vue3 vue-router

vue-router 바로가기

 

npm install

$ npm install vue-router

 

router.js

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name : 'main',
      path: "/",
      component: () => import("@/pages/MainPage.vue"),
      meta: {
        requiresAuth: true
      }
    },
  ],

})

router.beforeEach(async (to, from, next) => {
  next()
})

export default router

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/js/router'

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

 

App.vue

<template>
  <router-view />
</template>

 

src/pages/MainPage.vue

<script setup>
import { } from 'vue'

</script>

<template>
  <section id="main_page">
    ㅁ메인페이지
  </section>
</template>

<style scoped lang='scss'>

</style>