Vue Routing problems

Ionic Framework
1

I’m having no end of problems getting routing to work with a Vue app I’m trying to prototype.

  1. How to disable animation for one or more routes.
    I’m trying to have some views appear in place, rather than perform an animated slide transition. In previous iterations I could call this.$router.directionOverride = 'root'; before navigating, but this no longer appears to be valid. How can I set an animation transition on a per-view basis?

  2. How to set a view as root?
    I’m trying to have some views set as root, so that they replace the navigation history and eg don’t ever show a back button. I’ve tried a router.beforeEach function which navigates to the first view in the history and then performs a route.replace with the new view, but this doesn’t seem to work. How can I set a route (such as chosen from a side menu) as being the root of the navigation stack?

And some environment info;

    "@ionic/vue": "^5.4.0-dev.202008312030.a6d6d90",
    "@ionic/vue-router": "^5.4.0-dev.202008312030.a6d6d90",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"

Router Setup

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/categories/',
    component: () => import('@/views/Categories.vue'),
  },
  {
    path: '/categories/:categoryId',
    component: () => import('@/views/Category.vue'),
  },
  {
    path: '/people/',
    component: () => import('@/views/People.vue'),
  },
  {
    path: '/people/:personId',
    component: () => import('@/views/Person.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

App view

<template>
  <ion-app>
    <ion-menu content-id="main-content" type="overlay">
      <ion-content class>
        <ion-menu-toggle>
          <ion-button fill="clear">
            <ion-icon name="close"></ion-icon>
          </ion-button>
        </ion-menu-toggle>

        <ion-list>
          <ion-menu-toggle>

            <ion-item mode="md" lines="none" @click="goToPage('/categories')">
              <ion-label>Categories</ion-label>
            </ion-item>

            <ion-item mode="md" lines="none" @click="goToPage('/people')">
              <ion-label>People</ion-label>
            </ion-item>

          </ion-menu-toggle>
        </ion-list>
      </ion-content>

    <ion-router-outlet id="main-content" />

  </ion-app>
</template>
2

i have used vue in the past successfully with Ionic, but that was before the final push… looks like you are using the latest stuff hot off the presses, not sure how stable that it??

3

I tried using earlier versions first, but then got into problems too with router functions that were misssing. In particular, I couldn’t get the scroll position retention to work between views. This was due to two issues;

  1. The built-in support for ScrollBehaviour in the vue router (https://router.vuejs.org/guide/advanced/scroll-behavior.html) was not implemented in the Ionic Router wrapper, so views would lose their scroll position when navigating back and forward.

  2. I figured I could create a store to retain the last scroll position and handle retention myself, but while the scroll listeners, @ionScrollStart and @ionScrollEnd both worked, but @ionScroll did not fire. This is a known issue, which is meant to be fixed in the upcoming release https://github.com/ionic-team/ionic-framework/issues/21821

In your previous vue instances have you been able to implement the original features and/or scroll position retention sucessfully?