OnsenUI(Vue)の画面遷移の方法がわからない
OnsenUIの画面遷移方法に悩んでいます。
質問者のレベルは
- OnsenUIは初めて
- Vueは試してみた程度に触っている
- Javascriptは1年以上
となります。
現在の仕様として下図の様に、初期情報入力画面として、P1とP2を設置しており、
それが済み次第、メインページであるT1-P1へと遷移します。
しかし、T1-P1からP2への遷移もしてほしいとのことで、試行錯誤しています。
T1-P1からemitを行って
Tab1 -> TabBar -> App(ここでp2をStackに代入) -> p2
という処理を行っています。
画面遷移自体はできているのですが、下記の様なエラーが
発生してしまいます。
「vendor.bundle.js:6 TypeError: Cannot read property 'children' of undefined」
ナビゲーターやTab内で遷移したいという要望もあり、複雑になってしまい、
私自身も整理がつかなくなってきてしまいました...。
そもそもこの遷移方法(コードの書き方として)が正しいものなのか...とも感じております。
画面遷移そのものがおかしいと言われても困ってしまいますので、
どうか、この遷移を実現できる術を教えて頂きたいです。
よろしくお願いいたします。
ソースコード
t1p1.vue
<template> <v-ons-page> <custom-toolbar>tab1</custom-toolbar> tab1 <v-ons-button @click="back">戻る</v-ons-button> </v-ons-page> </template> <script> import customToolbar from './CustomToolbar'; export default { methods: { back() { this.$emit('changePage'); } }, components: { customToolbar } } </script>
tab1.vue
<template> <v-ons-navigator :page-stack="pageStack" @changePpage="changePpage"> </v-ons-navigator> </template> <script> import t1p1 from './t1p1'; export default { methods: { changePpage() { this.$emit('changePpage'); } }, data() { return { pageStack: [t1p1] } }, props: [] } </script>
tabbar.vue
<template> <v-ons-page> <v-ons-tabbar @changePage="changePage" class="tabs" position="bottom" :visible="true" animation="none" :tabs="tabs" :index.sync="tabIndex"> </v-ons-tabbar> </v-ons-page> </template> <script> import tab1 from './tab1.vue'; import tab2 from './tab2.vue'; export default { methods: { changePage() { this.$emit('changePage'); } }, data() { return { tabIndex: 0, tabs: [ { icon: 'ion-home', label: 'tab1', page: tab1, }, { icon: 'md-file', label: 'tab2', page: tab2, } ] } } } </script> <style>
App.vue
<template> <v-ons-navigator :page-stack="pageStack" @push="push($event)" @changePage="changePage"> </v-ons-navigator> </template> <script> import p1 from './Page1'; import p2 from './Page2'; export default { methods: { push(pageNumber) { this.pageStack.push(pages[pageNumber - 1]); }, changePage(e) { this.currentPage = p2; } }, data() { return { pageStack: [p1] } }, components: { p1, p2} } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。