I’m not sure what should be the expected behavior with beforeRouteUpdate.
It does get called if I add a router-link to my component with the same route and changed parameters.
However, if I go to my route, then back to homepage, then back to my route with changed parameters, it’s not called.
My assumption would be that it would get called so I can rerender my component, since a cached component is loaded with data related to the previous parameters.
Have you resolved this issue? I am facing the same problem
@snguyen23 Did you get this sorted?
Figured I can use ionViewWillEnter instead of beforeRouteUpdate for my use case.
Still unsure is the beforeRouteUpdate thing a bug or not.
I have built an ionic app using angular. I have a login screen that checks if a users details were accepted and redirects using router.nagivate([’/relativePath/’]).
This works fine in both the mobile and web app but when i load the app as a chrome extension it doesnt render the page. However getting to the same page using routerlink in html does render the page correctly in the chrome extension.
What am I missing?
it is not working with dynamic slide add or remove. Please help on the post-Ion slides do not update with dynamic content
What is the idiomatic way to create a pair of Cancel and Done sticky bottom buttons that take up full width? Here is an example:
I don’t see a way to do without a hacky CSS. I don’t see a way to do declaratively here ion-button: Ionic Framework API Docs
Any ideas?
I update my ionic and capacitor versions but the same issue I’m facing. Vibration is not disabled on the select date and time.
I am currently facing an issue where the swipe to go back functionality flickers/flashes back to the “from page” (home page in this example) after the gesture before finally going back to the “to page” (restaurant page in this example). This is happening intermittently, and usually doesn’t happen if you swipe back slowly (not sure if thats just a coincidence). I’ve included some code, my project info, and a video of the broken animation. Any ideas why this is happening?
home.page.html Router Link
<a routerLink="/restaurant/abc/123"><ion-button color="primary">Valid Restaurant</ion-button></a>
app-routing.module.ts Routes
const routes: Routes = [
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
},
{
path: 'create-restaurant-menu',
loadChildren: () => import('./pages/create-restaurant-menu/create-restaurant-menu.module').then( m => m.CreateRestaurantMenuPageModule)
},
{
path: 'create-restaurant-menu/:restaurantId',
loadChildren: () => import('./pages/create-restaurant-menu/create-restaurant-menu.module').then( m => m.CreateRestaurantMenuPageModule)
},
{
path: 'create-restaurant-account',
loadChildren: () => import('./pages/create-restaurant-account/create-restaurant-account.module').then( m => m.CreateRestaurantAccountPageModule)
},
{
path: 'home',
loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
},
{
path: 'restaurant/:restaurantId/:tableId',
loadChildren: () => import('./pages/restaurant/restaurant.module').then( m => m.RestaurantPageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
];
Ionic Info
Ionic:
Ionic CLI : 6.12.1 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.4.0) : 0.3.0
System:
NodeJS : v12.18.4 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/bin/node)
npm : 6.14.6
OS : macOS Big Sur
Video - I wasn’t able to attach a video so I created a link to the video stored on Google Drive
Using Ionic 5 .6.13/ Vue 4.5.12
Goal … I want the Home page to have unique background color, different from the remaining SPA ( #000000 during testing…)
Setup … Single Page (Ionic/Vue) App…Using a <base-layout> component as the app skeleton… Home.vue utilizes the default slot in <base-layout>
Problem … Scoped styling in Home.vue does not work. As expected, un-scoped styling globally changes the background color for every page, but is undesired (see 5 Attempts in sample code …they ALL change the ion-content background color ONLY if the ‘scope’ attribute is removed, and thus are globally applied)
QUESTION … Is there a way to use <style scoped> to selectively change the background of the ion-content for Home.vue ONLY ??
BaseLayout.vue
<template>
<ion-page>
<ion-header translucent>
<ion-toolbar>
..various buttons
</ion-toolbar>
</ion-header>
<!-- DEFAULT SLOT for content -->
<ion-content class="customStyles" fullscreen id="main-content">
<slot></slot>
</ion-content>
</ion-page>
</template>
Home.vue
<template>
<base-layout>
<!-- some Ionic components for content -->
</base-layout>
</template>
<style scoped>
/*Attempt 1*/
ion-content {
--background:#000000;
}
/*Attempt 2*/
ion-content {
--ion-background-color:#000000;
}
/*Attempt 3*/
ion-content.customStyles {
--background:#000000;
background: #000000;
}
/*Attempt 4*/
:host {
background: #000000;
}
/*Attempt 5*/
@media (prefers-color-scheme: light) {
ion-content {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;
}
}
</style>
I’m using axios for all my api calls on my Ionic App with Vue. When I build my app on Xcode I got the error “Network error”.
{"message":"Network Error","name":"Error","stack":"capacitor://localhost/js/chunk-vendors.48c94d63.js:3:19640\ncapacitor://localhost/js/chunk-vendors.48c94d63.js:24:8990","config":{"url":"URL","method":"post","data":"{\"page\":1}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1}}
I saw that this error occurs only when I have parameters
axios.post("API CALL", {
lat: this.latitude,
lng: this.longitude,
page: this.page,
})
.then((response) => {
// console.log(response.data);
this.events = response.data;
this.loaded = true;
})
.catch(async (err) => {
console.log(err);
});
When removing parameters, no errors. Server side, the CORS settings are OK.
What’s the problem ?
Using Ionic 5.6.13 / Vue 4.5.12 / Capacitor 6.17.0 VueRouter
Goal … I want to load some routes with no transitions/animations (depending on circumstance)
Setup … Single Page (Ionic/Vue) App…<main-menu> component used as a sidemenu. MainMenu.vue (see below) contains an <ion-list> with <ion-items>. The click handler 'navigateTo({name: routeName}) is a helper that simply invokes this.$router.push({name: routeName})
Problem … All the routes loaded by ‘push’ have a distinct platform-specific animation. However, some routes would be best to just appear, without animation. I could not find a means to suppress the default animation on a per-route basis. I tried passing a configuration object to this.$router.push(namedRoute, config) but keys like ‘transition’:‘none’ or ‘animate’:‘none’ had no effect and I cannot find any that do. I also tried adding a ‘router-link’ attribute to the <ion-button> which does load a route using a string such as ‘/some/path’, but does not accept Route objects, i.e. named routes as in {name: routeName} which is preferred for larger use cases.
In the framework docs, <ion-router-link> is not rec’d for Vue (and indeed loads nothing from the @ionic/vue package even if I try). Also, the <router-link> and <transition> components are Vue specific (not Ionic … which is responsible for the page transition animations). Setting the router-direction attribute on the <item> also had no effect.
QUESTION … What is ‘best practice’ to suppress page transition/animations for specific routes when using the Vue router in Ionic?
Example Code…
<template>
<ion-menu menu-id="main-nav-menu" content-id="main-content">
<ion-content>
<ion-list lines="none">
<ion-item button @click="navigateTo({ name: 'Home' })">
<ion-icon :icon="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item button @click="navigateTo({ name: 'UserProfile' })">
<ion-icon :icon="personOutline" slot="start"></ion-icon>
<ion-label>User Profile</ion-label>
</ion-item>
.........more list items
methods: {
navigateTo(nextRoute) {
menuController.close('main-nav-menu');
this.$router.push(nextRoute);
},
(topic deleted by author)
While you wait for better answers, I’d like to try to convince you to make the problem go away by not using tabs.
The very first sentence of the Usage guidelines in the Material Design guidelines says:
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
It sounds like you’re trying to do an “overview/detail” pattern with tabs, in which case they aren’t at the same level of hierarchy.
In fact, I would argue that the very core functionality you’re after here (trying to have interactions in one tab affect what’s going on in a different tab) is in fact something that wouldn’t make any sense if the tabs are being used properly (which might have something to do with why it’s not easy to do).
I think of tabs like rooms in a house. If I go from the bedroom to the kitchen, and make something to eat, then head back to the bedroom, I would expect the bedroom to be just as I left it. I wouldn’t expect taking a jar of mustard out of the fridge to change the sheets and teleport me back to the bedroom.
Here’s a code snippet you can put in your main.js that should load all Ionic components globally. (I think I found it on Stack Overflow.) As you mentioned you’ll want to remove this and import only the specific components you’re using after you’re done prototyping.
import * as IonicComponents from '@ionic/vue';
Object.keys(IonicComponents).forEach(key => {
if (/^Ion[A-Z]\w+$/.test(key)) {
app.component(key, IonicComponents[key]);
}
});
Setting keyboardClose to false did solve the issue, thanks for the tip!
I’m testing using a popover for a single-item autocomplete suggestion and it’s working alright. Main issue is when you tap the item in the popover to set it as the input value, focus goes from the input to the popover then back to the input after the popover closes, which causes the iOS keyboard to cycle from shown to hidden to shown and looks a bit buggy. Will report if I’ve figured out a solution and am open to suggestions in the meantime.
My app uses cordova and I have problem downloading files and opening them under android 11.
The cordova-plugin-file has an unreleased patch see more
The question is, if I migrate to capacitor do I resolve my problems? Is capacitor ready?
At this time I can’t afford a migration but if capacitor can help me I can ask more time to my boss.
What I need is download a file and make this file visible to the user, after download the file is open with the default viewer (eg pdf, image)
Please help me to understand how to move
any help is much appreciated.
hello there is nobody to help me?
You are not using latest version of social sharing plugin, because in the screenshot you can see the UIWebView code that is not in the plugin repository anymore.