[Vue] VueRouter 설치

라우터는 뷰에서 어떤의미로 사용하는것일까

Vue-router에서는 해당 방식으로 페이지를 전환한다.

미리 리소스를 받아놓고, 사용자의 요청이 들어오면 그 요청에 맞게 페이지를 전환하는 것이다.

npm install vue-router --force --save

layout이라는 폴더를 하나 만든다.

그리고 Header.vue를 만들고, 메뉴를 넣을것이다.

 

 

디자인은 부트스트랩을 사용하자, 부트스트랩을 설치하자

https://bootstrap-vue.org

BootstrapVue

 

npm install vue bootstrap-vue bootstrap

 

main.js 에 부트스트랩 관련 의존성 추가

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

 

그러면 아래와 같이 된다.

import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

 

Sample navBar 추가, 해당 사이트에서 example을 그대로 복사한다.

https://bootstrap-vue.org/docs/components/navbar

BootstrapVue

기본적으로 뷰의 형태는 이렇다.

teample은 html , script는 해당 이벤트나 변수 바인딩을 하는 부분이다.

부트스트랩은 템플릿 안에 복붙을 해준다.,

아래와 같은 소스가 된다.

<template>
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>
<script>
export default  {
    name : 'Header'
}
</script>

 

주목해야할 소스가 하나 있다.

App.vue를 봐야한다. 이는 초기에 진입하면 홈화면이다.

이 부분에서 헤더를 바꿔보자

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

일단 이렇게 하면 오류가 난다.

컴포넌트 생성시 이름에 대한 제약이 있다. Menu나 곂치지 않게 조합을 하지않으면 오류가 난다.

오류를 회피하기 위해 아래 옵션을 추가한다.

 

Vue.config.js (lintOnSave 추가)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave : false
})

App.vue에서 라우터에 대한 부분은 아래와 같이 제공해준다.

헤더는 그대로지만 라우터에 따라서 해당 페이지만 바뀌는 구조이기 때문이다.

<div id="app">
import { RouterView } from 'vue-router';
  <Header></Header>
  <div id = "content" class="content">
    <router-view></router-view>
  </div>


</div>

 

테스트 용 뷰도 여러개 만들어 준다.

이제 라우터로 바뀌는지 보는 것이다.

 

router.js를 생성한다.

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import Aboute from "./views/About";

Vue.use(VueRouter)

const router = new VueRouter({
    mode: "history",
    routes: [
        {path: "/",components: Home},
        {path: "/about",components: About},
    ]
})

그리고 main.js 에서 해당 내용을 임포트 해준다.