Vue.js + Onsen UI で ページを切り替える方法

Ⅰ. はじめに

タイトルの通り「Vue.js + Onsen UI で ページを切り替える方法」です。

Ⅱ. やり方

1. App.vue を書き換える

<v-ons-splitter-content>
  <component :is="$root.currentPage"></component>
</v-ons-splitter-content>

2. main.js を書き換える

import HomePage from './components/HomePage'

const app = new Vue({
  data () {
    return {
      currentPage: [ HomePage ]
    }
  }
}

app.$mount('#app')

3. MenuPage.vue を書き換える

<v-ons-list>
  <v-ons-list-item v-for="x in links" @click="onClick(x.page)" :key="x.link">
  ...
</v-ons-list>

import HomePage from './components/HomePage'
import AboutPage from './components/AboutPage'

export default {
  data () {
    return {
      links: [
        { label: 'HomePage', page: HomePage, icon: 'fa-book' },
        { label: 'AboutPage', page: AboutPage, icon: 'fa-book' }
      ]
    }
  },
  methods: {
    onClick (page) {
      this.$root.currentPage = page
    }
  }
}

実行結果