vue-router 사용

- vue-router install

npm install vue-router

npm install vue-router

 

해당 폴더, 프로젝트에 package.json에 dependencies가 추가된다.

 

- main.js

import { createApp } from 'vue'
import router from '@/router'

import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

 

참조. @는 src 폴더를 가리킨다.

 

- router 폴더 생성 후 index.js 파일 생성

import { createRouter, createMemoryHistory } from 'vue-router'

import HelloWorld from '@/components/HelloWorld.vue'
import AppLayout from '@/components/layouts/AppLayout.vue'

const Foo = { template: '<div>foo</div>' }

const routes = [
    {
        path: '',
        name: '',
        component: AppLayout,
        children: [
            {
                path: '/hello',
                name: 'hello',
                component: HelloWorld
            },
            {
                path: '/foo',
                name: 'foo',
                component: Foo 
            }
        ]
    }
]

const router = createRouter({
    history: createMemoryHistory(),
    routes // `routes: routes`의 줄임
})

export default router

 

라우팅의 방식 중에 named routes(이름있는), nested routes(중첩) 방식이 있다.

중첩방식을 통해서, 레이아웃을 그리고, 그 속에 view를 라우팅 할 것이다.

Nested Routes | Vue Router (vuejs.org)

Vue Router | The official Router for Vue.js

 

- App.vue

<template>
  <h1>Hello Vue!</h1>
  <RouterView />  
</template>

<script>
export default {
  name: 'App'
}
</script>

 

 

- AppLayout.vue

<template>
    <div>
        app layout
    </div>

    <HeaderView />
    <LeftView />
  <main>
    <RouterView />
  </main>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import LeftView from '@/components/LeftView.vue'

export default {
    name: 'AppLayout',
    components: {
        HeaderView,
        LeftView
    },
    created () {
        this.$router.push({name: 'hello'})
    }
}
</script>

 

this.$router.push 로 화면이 생성되자마자 hello 페이지로 뷰 라우팅될 것이다.

 

- HeaderView.vue

<template>
    header HeaderView
    <nav>
        <RouterLink to="/hello">Go to hello</RouterLink>
        <RouterLink to="/foo">Go to foo</RouterLink>
    </nav>
</template>

 

 

여기까지 기본 설정.

끝.