【Vue.js】 vue-router를 이용하여 라우팅 작성하고 화면 천이를! !

【골】

Vue.js vue-router를 이용하여 라우팅 작성하고 화면 전환을! !

【환경】

mac catarina 10.156Vue.js v2.6.12

【실장】

node.js vue.jsのインストールは割愛

작업장 만들기

/.bash

$ vue create routing.js
$ cd routing.js
$ npm install vue-router
$ cd src
$ touch router.js
$ cd ..
$ npm run serve

코딩

route.js

import Vue from 'vue';
import Router from 'vue-router';
import コンポーネント命名　from '作成したコンポーネント名'

Vue.use(Router);


export default new Router({
  mode: 'history',
  routes: [
    {path: '/', component: },
    {path: 'お好きなルーティング名', component: 上で命名したコンポーネント名},
    {path: 'お好きなルーティング名', component: 上で命名したコンポーネント名},
     .
     .
     .
     .

  ]

})

App.js

import router from './router'

.
.
.


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

무한히 늘릴 수 있습니다 🙇‍♂️

【정리】

■ "vue-router"설치
■ 「src」하하에 「router.js」를 작성해 라우팅의 설정을 코딩해 간다
■ 「App.js」에서 「router.js」를 import하여 적용시킨다

【추천 기사】

■ 【Vue.js】 IF 문 · For 문 조건 분기, 반복 처리
htps : // m / 타나카 유 3 / ms / 0cf9 11525331b764

■ 【Vue.js】 axios/firebase를 이용하여 데이터 교환
htps : // 코 m / 타나카 유 3 / ms / 192886 66522f027365

■ 【Vue.js】Vue.js에서 fontasome (Free 버전)를 사용하는 방법
htps : // 코 m / 타나카 유 3 / ms / 86d05241f72674d186f6