I'm developing an app using Ionic 4 and there is a Tab Panel in the bottom of the page. the thing is that tab panel is not showing on all other pages. how to fix that?
It has to with the routing.
Say you put your tab panel in a page called tabs. All those other pages that you want to have that same tab panel, have to be declared as children to your tabs page.
So your tabs.module.ts should look like something like this:
const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
{
path: '',
redirectTo: 'child1'
},
{
path: 'child1',
loadChildren: './child1/child1.module#Child1PageModule'
},
{
path: 'child2',
loadChildren: './child2/child2.module#Child2PageModule'
},
{
path: 'child3',
loadChildren: './child3/child3.module#Child3PageModule'
},
]
},
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
]});
Then you can link your child pages in the ion-tab as follows:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="child1">
<ion-label>My child 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="child2">
<ion-label>My child 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="child3">
<ion-label>My child 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Note how what is set for tab attribute in each ion-tab-button agrees with the a path in the routes.
Related
I´ve implemented tabs with vue-router. When the user clicks back and forth within those tabs, but then likes to go to the previous page, he needs to press "back" multiple times to backplay each tab visit first.
Is it possible to exclude routes from the history in vue-router like:
let router = new VueRouter({
mode: 'history',
routes: [
.
.
.
{
path: '/tabs/',
name: 'tabs',
component: TabPage
children: [
{
path: 'tab1',
name: 'tab1',
component: Tab1Page,
excludeFromHistory: true
},
{
path: 'tab2',
name: 'tab2',
component: Tab2Page
excludeFromHistory: true
},
]
}
]
});
Onclick on a tab:
Instead of pushing a route to the route history, replace the
existing top of the route history.
<div #click="$router.replace('/tabs/tab1')"> Tab 1 </div>
In case you are using the router-link tag
<router-link to="/tabs/tab1" replace> Tab 1 </router-link>
I have an application with authentication system and a backend dashboard.
By default the route show the authentication component :
{
path: "/",
name: "Authentication",
component: Auth
},
The App.view contains the
Once logged in I'm redirected to another vue component "home" :
{
path: "/dashboard",
name: "home",
component: Home,
},
So far, so good. In this home component i have some HTML with menu and I want to to show component in the same page.
Here is a sample of html from the home template
<div>
<router-link :to="'/dashboard/user'">User</router-link>
<router-link :to="'/dashboard/stats'">Stats</router-link>
<app-user></app-user>
<app-stats></app-stats>
</div>
I also created the routes for those components in router but while clicking on the link it shows a white page. I just began vue.js and I'm sure it's an easy stuff to manage. My objective is to display the component according to the page which is displayed.
Update your routing file like below so parent module can load its children in their respective router outlet.
Place <router-view></router-view> in your dashboard component so it will load its children.
If you visit /dashboard/user then UserCompoent will get render in <router-view></router-view> of dashboard component.
{
path: "/dashboard",
name: "home",
component: Home,
children: [
{
path: 'user',
component: UserComponent,
},
{
path: 'state',
component: StateComponent,
}
],
},
I am looking to build a layout with a dynamic side-bar. The sidebar on its own has its own template, but I do not want that to be rendered unless the underlying router-view is used. Below the pseudo-code:
<template>
<transition name="slide">
<div class="sidebar" v-if="showSidebar">
<SidebarHeader />
<router-view name="side"><router-view>
<SidebarFooter>
</div>
</transition>
<div class=main><router-view></router-view></div>
</template>
Is there any obvious way of achieving that? I failed to find any property or function on $router or $route object.
As a workaround I've made Sidebar component that has to be used for each sidebar view, but is there a better option?
It seems I found the answer - it requires a bit of trick int he routes:
{
path: '',
component: 'Layout',
children: [
{
path: '',
components: { default: SomeMainComponent },
children: [
{ path: '' },
{
path: '',
components: { side: SideBox },
children: [
path: 'hello',
component: HelloSidebox
]
}
]
}
]
}
That empty route {path: ''} is to prevent the next route from being displayed for the exact route match and only render SideBox component for any matching sub-routes.
Given following Layout component:
Layout:
<template>
<div class="container">
<div class="sidebar-container">
<router-view name='sidebar'></router-view>
</div>
<div class="main">
<router-view></router-view>
</div>
</div>
</template>
Is there a way to specify in deeply nested route to use sidebar outlet?
const routes = {
path: '',
components: { default: SomeMainComponent },
children: [{
path: 'foo',
children: [{
path: 'bar',
components: { sidebar: BarSide }
}]
}]
}
It seems that router is only looking to resolve the router outlets of the direct route parent - if I move components: { side: BarSide } to the foo definition, then the component is rendered as expected. As is, component is not even being created.
Is there a way to achieve this?
JsFiddle: https://jsfiddle.net/xptkhf4z/5/ - clicking on a With helper link updates the route, keeps default component rendered but does not render the additional component in helper slot.
Although I don't have the full answer, you seem to have to include a component on each nested level. That can either be your page component or a layout component.
This should work:
const routes = {
path: '',
components: { default: SomeMainComponent },
children: [{
path: 'foo',
component: () => import('layouts/DummyLayoutComponent'),
children: [{
path: 'bar',
components: { sidebar: BarSide }
}]
}]
}
The DummyLayoutComponent should be a neutral layout, because it is added to the layout of SomeMainComponent.
I find it a little awkward that we seem to have to define an "empty" layout just to get this to work. But maybe I'm just missing an important point.
This is my router structure
{
path: '/',
name: 'home',
component: Home
},
{
path: '/user/:id',
name: 'user',
component: User,
children: [
{
path: '',
name: 'page',
component: Page
},
.....
}
I used this in Home.vue to redirect (/user/12345)
<router-link
:to="{
name: 'user',
params: {id: user.userId}
}"
>
When I clicked this link in home page, it routes correct path however I can not render child component (Page.vue) However when I reload the page, child component is loaded successfully. (url is still same)
There is an only rendering issue when I click the link on the homepage. How can I get rid of this. Thanks in advance.
User.vue
<template>
<div>
<NavDrawer/>
<router-view></router-view>
</div>
</template>
Edit: Any help will be so beneficial for me. Thanks