vue.js__Vue Router
🌱 라우터 (router)
- 대체로 경로는
router > index.vue
파일에 몰아놓고,
각 페이지마다 필요한router-link to=''
넣어 필요한 버튼 만들고
어짜피 화면 변환은 페이지 하나에서router-view
해주면 됨.<router-link to='url값'> 클릭 </router> - 페이지 이동 태그, 화면에서는 <a>태그로 표시 됨. 클릭 시 해당 url로 이동됨. <router-view/> --- 페이지 표시 태그. url값에 따라 router된 컴포넌트 보여줌. !! 반드시 <router-link>와 <router-view>를 같이 써줘야 한다.
작성예시)
...
<div id='test'>
<h1>라우터 예제</h1>
<br/>
<!-- 클릭 시 url값을 변경하는 태그 -->
<router-link to='/main'> main으로 이동 </router-link>
<router-link to='/login'> login으로 이동 </router-link>
<br/>
<!-- url값에 따라 갱신되는 화면 영역 -->
<router-view/>
<div>
<script>
// main, login 컴포넌트 정의
const Main = { template: '<div> main </div>'};
const Login = { template: '<div> login </div>'};
// 각 url에 맞춰 표시할 컴포넌트 지정
const aaa = [
{ path: '/main', // 👉 path, component = 필수요소임!!!!!!
componenet: Main,
name: 'Main' // 👉 name = 필수요소는 아니지만 있으면
}, // name으로도 router부르기 가능함.
{ path: '/login',
componenet: Login,
name: 'Login'
},
]
// 뷰 라우터 정의
const router = new VueRouter({
aaa. //위에서 선언해준 aaa
})
// 뷰 인스턴스에 라우터 추가
const bbb = new Vue({
router
}).$mount('#test');
//$mount() = el속성과 같이 인스턴스를 화면에 붙이는 역할을 함.
// = 인스턴스를 생성할 때 el속성을 넣지 않았더라도,
// = 생성 후에 $mount()를 이용하며녀 강제로 붙일 수있음.
= vue router의 공식 문서가 다 이렇게 되어있음.
</script>
🌱 네스티드 라우터 (Nested Router)
: router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
- 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식.
( vue공식 홈페이지 docs에도 없고, 거의 쓸 일 없다고 함. )
네스티드 라우터 작성방법)
<temlate>
<div id = 'test'>
<router-view> user 컴포넌트가 뿌려질 영역 </router-view>
</div>
</template>
<script>
const User = { //컴포넌트 내용 정의
template: `
<div>
User Component
<router-view>하위 컴포넌트가 뿌려질 영역</router-view>
</div>
`
}
const routes = [
path:'/user',
component: User,
children:[ // 네스티드 라우팅 정의 부분
{
path: 'posts',
component: UserPost
},
{
path:'profile',
component: UserProfile
}
]
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
})i.$mount('#test')
</script>
🌱 네임드 뷰 (Named View)
: 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식.
- 같은 레벨에서 여러개의 컴포넌트를 한 번에 보여줌.
네임드 뷰 사용 방법)
<div id='test'>
<!-- 라우팅영역 정의 -->
<router-view name='aaa'></router-view>
<router-view></router-view> <!--name없으면 디폴트-->
<router-view name='ccc'></router-view>
</div>
<script>
// 컴포넌트 내용 정의
const Body = {template: '<div>This is Body</div>'};
const Header = {template: '<div>This is Header</div>'};
const Footer = {template: '<div>This is Footer</div>'};
const router = new VueRouter({
routes: [
path: '/',
components: { //-- router-view의 name속성과 컴포넌트 연결
default: Body,
aaa: Header,
ccc: Footer
}
]
})
</script>
Author And Source
이 문제에 관하여(vue.js__Vue Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@park0eun/vue.jsVue-Router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)