備忘録

備忘録

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

Ⅰ. はじめに

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

Ⅱ. やり方

1. App.vue を書き換える
<v-ons-splitter-content>
  <component :is="currentPage"></component>
</v-ons-splitter-content>
import HomePage from './components/HomePage'
import AboutPage from './components/AboutPage'
import MenuPage from './components/MenuPage'

export default {
  data () {
    return {
      currentPage: 'HomePage'
    }
  },
  components: { HomePage, AboutPage, MenuPage }
}
2 MenuPage.vue を書き換える
<v-ons-list>
  <v-ons-list-item modifier="chevron" v-for="item in essentialLinks" @click="onClick(item.link)" :key="item.link">
    <div class="left"><v-ons-icon fixed-width :icon="item.icon"></v-ons-icon></div>
    <div class="center">{{ item.label }}</div>
  </v-ons-list-item>
</v-ons-list>
import HomePage from './components/HomePage'
import AboutPage from './components/AboutPage'
import MenuPage from './components/MenuPage'

export default {
  data () {
    return {
      essentialLinks: [
        { label: 'HomePage', link: 'HomePage', icon: 'fa-book' },
        { label: 'AboutPage', link: 'AboutPage', icon: 'fa-book' }
      ]
    }
  },
  methods: {
    onClick (link) {
      this.$parent.$parent.$parent.$parent.$data.currentPage = link
    }
  }
}
実行結果

f:id:kagasu:20170729141953g:plain