Vuejs Router 설정

Vue.js의 라우터(router)는 Vue 애플리케이션에서 페이지 간의 네비게이션을 관리하고, URL을 기반으로 컴포넌트를 동적으로 렌더링할 수 있게 해주는 기능이다. Vue Router는 Vue.js 공식 라이브러리 중 하나로, SPA(Single Page Application)를 구축하는 데 주로 사용된다.

Roueter 설치

npm install vue-router@next

 

Router 설치

Router 설치이후 package.json  router 추가된 모습

 

main.js  에서 router 사용 추가

 

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

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

 

Router 설정 파일 

 

router 폴더 생성 후  index.js 파일을 만든다 .

없는  page 로 접근하는 경우  404page 로 리다이렉트 할수 있도록  설정하는 부분도 추가해준다

 

import { createWebHistory, createRouter } from "vue-router";
import Main from "../components/Hello.vue"

const routes = [
    {
      path: "/",
      name: "Main",
      component: Main,
    },
    {
        path: "/home",
        name: "Main2",
        component: Main,
      },
    {
        path: "/page1",
        name: "page1",
        component: () => import('../components/PageView1.vue'),
      },

    {
      path: "/404",
      name: "error",
      component: () => import('../components/PageError404.vue'),
    },
 
    /* 없는  페이지 접근시  404 페이지로  리다이렉트 */
    {
      path: "/:pathMatch(.*)*",
      redirect: "/404"
    }
  ];

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


  export default router;

 

App.vue  라우터  적용 

 

App.vue 열어서  라우팅 될수 있도록 설정 

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

 

실행시  첫 화면	/page1  접속시	/page5   접속시

 

HOME|Page1  이라 되어있는 부분  라우터 링크 처리 는 router-link  를 써서  링크를 걸어주면 된다.

 <p>
      <router-link to="/">Home</router-link> |
      <router-link to="/page1">Page1</router-link>|
    </p>