- 환경: Quasar CLI + Vite
/
와/login
경로로 이동할 수 있도록 router를 설정하고자 한다.
const routes = [
{
path: "/",
component: () => import("layouts/MainLayout.vue"),
children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
},
// Always leave this as last one,
// but you can also remove it
{
path: "/:catchAll(.*)*",
component: () => import("pages/ErrorNotFound.vue"),
},
];
export default routes;
quasar dev
를 실행했을 때 default 화면
수정한 코드
/
인 경우 RouteLayout.vue에서 HomePage.vue를 component로 사용하고, /login
인 경우 LoginPage.vue를 component로 사용한다.const routes = [
{
path: "/",
component: () => import("layouts/RouteLayout.vue"),
children: [
{
path: "",
component: () => import("pages/HomePage.vue"),
},
{
path: "login",
component: () => import("pages/LoginPage.vue"),
},
],
},
// Always leave this as last one,
// but you can also remove it
{
path: "/:catchAll(.*)*",
component: () => import("pages/ErrorNotFound.vue"),
},
];
export default routes;
<template>
<q-layout>
<router-link to="/">Home</router-link>
<router-link to="/login">Login</router-link>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<template>
<q-page>Home Page</q-page>
</template>
<template>
<q-page>Login Page</q-page>
</template>
<router-view>
태그에 들어가고, <q-page-container>
태그 안에 <q-page>
태그가 위치하게 된다.