vue-router로 redirect하기

설치

npm i vue-router@next

./src/router.js 생성

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

const routes = [
    {
        path: '/',
        name: 'App',
        component: () => import('./App'),
        // () => import(동적으로 모듈 가져오기)
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/'
    },
];

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

path : route를 찾을 수 있는 url path
name : route로 연결할 때 사용하는 이름(선택)
component : route에서 불러와질 컴포넌트

main.js 수정

import { createApp } from "vue";
import { router } from "./router";
import App from "./App.vue";
import "./index.css";


const app = createApp(App)

app.use(router);
app.mount("#app");

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

const routes = [
    {
        path: '/',
        name: 'main',
        component: () => import('@/view/MainPage.vue'), // 동적 import
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/'
    },
];
// object return {} name: main
// router  동적으로 처리하기
export const router = createRouter({
    history: createWebHistory(),
    routes,
});