[Vue] vue-router 사용하기

Use vue-router

0. Install Module

/* vue 또는 npm으로 router를 설치한다. 
주로 vue로 설치하는 것이 낫다. module과 함께 router 폴더와 파일이 생성된다. */

npm install vue-router(= vue add router)

직접 폴더와 파일을 생성해도 된다.
1. router 폴더 생성
2. index.js 파일 생성

1. Edit main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount('#app')

2. Edit router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import HelloWorld from '@/components/HelloWorld';
Vue.use(VueRouter);

const routes =  [ /* path 별로 component를 분리할 수 있다. */
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld,
    props: true /* params로 데이터를 전달할 때 props에 데이터를 전달 받아 간편하게 사용할 수 있다. */
  }
]

const router = new VueRouter({
  mode: "history", /* mode에는 history, hash 가 있다. */
  routes,
});

export default router;

params에 대한 내용은 여기서 확인할 수 있다.

3. Edit App.vue

<template>
  <v-app>
    <v-main>
      <router-view></router-view> /* path에 연결된 화면이 나옴, 간단하게 <router-view/>로도 사용할 수 있음. */
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",
};
</script>

Show Component without vue-router

그냥 vue-router 없이 화면을 띄우려면 vue를 import 시켜 사용한다.

<template>
  <v-app>
    <v-main>
      <hello-word /> /* <HelloWorld/> 로도 사용할 수 있다. */
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
``