[vue-news] 라우터 기본 - redirect 속성과 router-link
vue-router 구성정보를 url 입력이 아니라 link를 클릭했을 때 간단하게 페이지를 전환 해보자!
💻 redirect 속성
import Vue from 'vue';
import VueRouter from 'vue-router';
import NewsView from '../views/NewsView.vue';
import AskView from '../views/AskView.vue';
import JobsView from '../views/JobsView.vue';
Vue.use(VueRouter);
export const router = new VueRouter({
routes: [
{
path: '/',
// vue-router에서 기본적으로 제공된다.
// 접속시 바로 출력되는 컴포넌트 지정
redirect: '/news'
}
{
path: '/new',
component: NewsView,
},
{
path: '/ask',
component: AskView,
},
{
path: '/jobs',
component: JobsView,
},
]
});
💻 router-link
/component/ToolBar.vue
생성- App.vue에서
import
<template>
<div id = "app">
// ③ 컴포넌트 등록
// 1 - Strongly Recommended
<ToolBar></ToolBar>
// 2 - Essential
<tool-bar></tool-bar>
<router-view></router-view>
</div>
</template>
<script>
// ① import
import ToolBar from './components/ToolBar.vue';
export default {
// ② 컴포넌트 연결
components: {
ToolBar
}
}
</script>
ToolBar.vue
<template>
<div class="header">
<router-link to="/news">News</router-link> |
<router-link to="/ask">Ask</router-link> |
<router-link to="/jobs">Jobs</router-link>
</div>
</template>
<style scoped>
.header {
color: white;
background-color: #42b883;
display: flex;
padding: 8px;
}
.header .router-link-exact-active {
color: #35495e;
}
.header a {
color: white;
}
</style>
Author And Source
이 문제에 관하여([vue-news] 라우터 기본 - redirect 속성과 router-link), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aranparrk/vue-news-redirect-속성과-router-link저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)