Named views when using IonRouterOutlet?

Ionic Framework Ionic Vue
1

The RouterView component allows for the use of “Named Views”. Is it possible to get this same functionality when using Ion-RouterOutlet?

2

Ionic Vue does not support that at the moment. I recommend opening a Feature Request and including a use case if you would like to see this in Ionic.

3

Not sure this is what you are looking for, but define your routes like


import { createRouter, createWebHistory } from '@ionic/vue-router';
import Projects from '@/pages/Projects';
import { PARAMETERS } from '@/config';

const routes = [
  {
    path: '/',
    redirect: {
      name: PARAMETERS.ROUTES.PROJECTS
    }
  },
  {
    path: '/projects',
    component: Projects,
    name: PARAMETERS.ROUTES.PROJECTS
  },
  {
    path: '/projects/add',
    component: () => import('@/pages/ProjectsAdd.vue'),
    name: PARAMETERS.ROUTES.PROJECTS_ADD
  },
  {
    path: '/projects/entries',
    component: () => import('@/pages/Entries.vue'),
    name: PARAMETERS.ROUTES.ENTRIES
  },
  {
    path: '/projects/entries/add',
    component: () => import('@/pages/EntriesAdd.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_ADD
  },
  {
    path: '/projects/entries/errors',
    component: () => import('@/pages/EntriesErrors.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_ERRORS
  },
  {
    path: '/projects/entries/add/branch',
    component: () => import('@/pages/EntriesAdd.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_BRANCH_ADD
  },
  {
    path: '/projects/entries/view',
    component: () => import('@/pages/EntriesView.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_VIEW
  },
  {
    path: '/projects/entries/view/branch',
    component: () => import('@/pages/EntriesViewBranch.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_VIEW_BRANCH
  },
  {
    path: '/projects/entries/upload',
    component: () => import('@/pages/EntriesUpload.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_UPLOAD
  },
  {
    path: '/settings',
    component: () => import('@/pages/Settings.vue'),
    name: PARAMETERS.ROUTES.SETTINGS
  },
  {
    path: '/projects/entries/download',
    component: () => import('@/pages/EntriesDownload.vue'),
    name: PARAMETERS.ROUTES.ENTRIES_DOWNLOAD
  }

];




const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  scrollBehavior () {
    return { x: 0, y: 0 };
  },
  routes
});

export default router;

then in your components bind them to @click calls like


 router.replace({
 name: PARAMETERS.ROUTES.PROJECTS,
 params: { refresh: true }
 });

or


 router.push({
 name: PARAMETERS.ROUTES.PROJECTS,
 params: { refresh: true }
 });
4

@mirko77 What you have described is using the capabilities of the native Vue router. I was asking whether this same capability existed for the ionic vue router which would allow for being able to use the transitions that the ionic vue router would supply.

5

We are using the above approach in Ionic and all the transitions works, this is our App.vue


<template>
	<ion-app>
		<left-drawer></left-drawer>
		<right-drawer></right-drawer>
		<ion-router-outlet id="main" />
	</ion-app>
</template>

<script>
import { IonApp, IonRouterOutlet } from '@ionic/vue';

export default {
	name: 'App',
	components: {
		IonApp,
		IonRouterOutlet
	}
};
</script>

the question was " using Named Views". Yes, it is possible.

6

Just to clarify, the question was regarding “Named Views” not “Named Routes”.

Named Views is a feature that lets you display multiple views at the same time via <router-view>. This is done via a name property on router-view. Ionic Vue does not support that at the moment. See Named Views | Vue Router for more info.

Named Routes is a feature that lets you refer to routes by name rather than path. So for example doing router.push({ name: 'user' }) instead of router.push('/dashboard/account/user'). Ionic Vue does support this feature. See Named Routes | Vue Router for more info.