Can't get tabs to work at all

オープン
#146 コメント 7 件 リアクション 0 件 担当者 1 名 GitHub で見る

@michaeltintiuc がすでに取り組んでいます。

2020年8月14日 から。

評価

この issue はまだ評価されていません。

説明

question v2

Sorry if I'm missing something obvious here. I'm trying to add a tab bar to my app (based on Vue 2) for the first time, and I just can't get it to work at all. I've looked through all the other issues I could find here relating to tabs, and tried various bits of code from them and the examples referenced by them, but I'm not even getting as far as having the issues they've encountered.

I've tried putting the template code for the tabs in both App.vue and Home.vue separately, as I couldn't find anything that says where that code is supposed to go, but it doesn't seem to make much difference either way for me. For the actual <ion-tab-button>s, I've tried with just the tab attribute alone, with the :to attribute set to a named route, and I've even tried a normal href attribute.

Whichever way I try it, the tab I click does get highlighted in the tab bar, but the URL never changes at all and it doesn't actually load anything. No errors (or messages of any sort) are output in my Chrome dev console either. I think it is actually switching to the matching <ion-tab> element though, because I noticed in some of my experiments with changing the content of one of the <ion-tab> elements, it actually went blank when I selected that tab. And then I also found when I tried with a longer page, it actually remembered a different scroll position for each tab (even though each tab is still displaying the same originally-loaded page).

What am I missing here? Is there perhaps something I need to set to enable <ion-tab-button>s to actually navigate to another page?

Or is there a complete example of how to implement tabs with the current (Vue 2) version of ionic-vue? I noticed one of the issues mentioned a "Cookbook" page, but that doesn't seem to exist anymore. I've been using @modus/ionic-vue@1.3.10, but I've also just updated to 1.3.12 and re-tried everything mentioned above, with the same results.

主要言語
TypeScript
スター
268
フォーク
24
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ModusCreateOrg/ionic-vue のほかの issue

ModusCreateOrg/ionic-vue の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。