mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00
df39ceac6d
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> React: Refreshes the app upon a tab button press and returns to the first tab content. Vue: Does not render the tabs when the app doesn't use a router at all because of `ionRouter` not being defined. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - React: Users can press on the tab button without having the app refresh and displays the associated tab content. - Vue: Renders the tabs when router is not present. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: 8.3.1-dev.11726094383.1cdbab6f How to test: I recommend using the playgrounds in the Ionic Framework docs repo since those playgrounds are setup to not have any routers at a high level. 1. Navigate to the [basic usage section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage) 2. Select React 3. Open the StackBlitz example 4. Click on any tab button 5. Notice that the app refreshes and returns to the first tab content 6. Install the dev build: `npm install @ionic/react@8.3.1-dev.11726094383.1cdbab6f` 7. Verify that the app doesn't refresh and reset the content after clicking on any tab button 8. Navigate to the [basic usage section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage) 9. Select Vue 10. Open the StackBlitz example 11. Notice that tabs doesn't render 12. Open the console and notice that there's an error `ionRouter is undefined` 13. Install the dev build: `npm install @ionic/vue@8.3.1-dev.11726094383.1cdbab6f` 14. Verify that it renders 15. Verify that the console no longer shows the error
@ionic/vue
Ionic Framework integration for Vue 3 apps.
Building
- Install dependencies in
@ionic/core:
cd core && npm install
- Build
@ionic/core. This will generate Vue component bindings in thepackages/vuedirectory:
npm run build
- Install dependencies in
@ionic/vue:
cd packages/vue && npm install
- Build
@ionic/vue:
npm run build
- Install dependencies in
@ionic/vue-router:
cd packages/vue-router && npm install
- Build
@ionic/vue-router:
npm run build
Tests
- E2E Tests are found in the
packages/vue/test/base/testsdirectory and use Cypress. - When making changes to
@ionic/vueor@ionic/vue-routeryou can runnpm run syncin the test-app directory to ensure that the test application is using your built changes. Be sure to build in thevueandvue-routerdirectories first. - Tests can be run in headless mode by running
npm run cypress. - If you want to open the Cypress test runner, you can run
node_modules/.bin/cypress open. - Bug fix and feature PRs should have new tests verifying the PR functionality.
Contributing
See our Contributing Guide.
Need Help?
Post your question on the Ionic Forum.