【vue.js】Vue Routerを使ってみた

vue.jsでルーティングが簡単に実装できるVue Routerを使ってみたので備忘録

vue.js は通常、画面遷移の際にURLがhttps://XXX.ne.jp/#page2のように、#がついてしまいます。

ですが、Vue Routerを使うことで、https://XXX.ne.jp/page2のように、#  がつかないURLで画面遷移することができます

router.vuejs.org

Vue.jsのアプリケーション内で、下記コマンド実行

npm install --save-dev vue-router

package.jsonに下記が追加されていればOK

 "vue-router": "^X.X.X",

src内のApp.vue内で、ルートパス（/）にアクセスされたらHome.vue、/page2というパスならPage2.vueを表示させる例

src/App.vue

<template>
 <div id="template">
  <router-link to="/">　＃リンクをこのように書く
  home
  </router-link>
  <router-link to="/page2">　＃リンクをこのように書く
  page2
  </router-link>
  <router-view/>　#ここに 下記Home.vueまたはPage2.vueの中身を表示
 </div>
</template>

src/Home.vue

<template>
<p>Home</p>
</template>

src/Page2.vue

<template>
<p>Page2</p>
</template>

src/main.js

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

Vue.config.productionTip = false

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

src/router.js

import Vue from 'vue'
import Router from 'vue-router'
// コンポーネントを読み込む
import Home from './Home.vue'
import Page2 from './page2.vue'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
path: '/', 
component: Home 
},
{
path: '/page2',
component: Page2
}
]
})

以上です！

ページ遷移を管理できて便利だな！と感じました。

railsでいうところのroutes.rb のような役割なので、railsを触ったことある方なら、とっつきやすいのでは？？と思います

おやすみなさいぃぃぃ