[vue.js] vue-router 사용하기

vue-router 설치 및 활용방법 입니다.

 

 

설치하기

npm install vue-router

 

package.json 파일 14라인에 vue-router가 추가 되었습니다.

 

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

아래와 같이 디렉토리 (src/router)를 구성하고 basic.js , index.js 파일을 생성합니다.

├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── Page1.vue
│   ├── main.js
│   └── router
│       ├── basic.js
│       └── index.js

 

router/index.js : 여러개의 router를  import 하는 역할을 담당합니다.

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import basic from "@/router/basic";
Vue.use(Router)
 
export default new Router({
    mode: 'hash',
    routes: [
        ...basic
    ]
})

router/basic.js : 기본 router 입니다. 내용이 추가될때 마다 이곳에 컴포넌트를 추가하여 path에 사용하는 컴포넌트를 정의합니다.

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
];
 
export default basic;

 

Page1.vue 파일을 생성합니다.

<template>
  <div id="app">
    {{ page1 }}
  </div>
</template>
 
<script>
export default {
  name: 'Page1',
  data() {
    return {
      page1 : "test router",
    }
  }
}
</script>
 
<style scoped></style>

 

main.js 파일을 아래와 같이 수정합니다.

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 

그리고 나서 build 하여 실행해보면 아래와 같은 페이지를 확인할수 있습니다.

 

hello-world

page1