npm install vue-router@4
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import my_router from "./router"
createApp(App).use(my_router).mount('#app')
import { createWebHistory, createRouter } from "vue-router";
import List from './components/ListPage'
const routes = [
{
path: "/list",
component: List,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
<div class="container mt-4">
<h5>React blog</h5>
<p>- Vue -</p>
</div>
<router-view :blog_contents="blog_contents"></router-view>
<ListPage>
한 것과 마찬가지가 된 것이다.router-link to="/
사용하면, 해당 페이지로 이동하는 기능 만들 수 있다. <router-link to="/">HomePage</router-link>
<router-link to="/list">ListPage</router-link>
import Detail from './components/DetailPage'
const routes = [
{
path: "/list",
component: List,
},
{
path: "/",
component: Home,
},
{
path: "/detail/:id",
component: Detail,
}
];
<div>
<h4>상세 페이지</h4>
<h5>{{blog_contents[$route.params.id].title}}</h5>
<p>{{blog_contents[$route.params.id].content}}</p>
</div>
{
path: "/detail/:id(\\d+)",
component: Detail,
}
router에서는 정규식을 넣어서 파라미터를 업그레이드할 수 있다.
같은 route에 걸리면 맨 위의 라우트 주소 우선순위이므로 순서에 유의하자.
const routes = [
{
path: "/list",
component: List,
},
{
path: "/",
component: Home,
},
{
path: "/detail/:id(\\d+)",
component: Detail,
children: [
{
path: "author",
component: Author
},
{
path: "comment",
component: Comment
}
]
}
];
<template>
<div>
<p>{{$route.params.id}}</p>
<h4>상세 페이지</h4>
<h5>{{blog_contents[$route.params.id].title}}</h5>
<p>{{blog_contents[$route.params.id].content}}</p>
<router-view></router-view>
</div>
</template>
<h5 @click="$router.push('/detail/0')">{{content.title}}</h5>
$router.go(-2)"