I’ve seen a lot of posts about this in Github but nothing seems to be the same issue for me / resolving it. My gut says we’ve done something wrong in our routes but can’t seem to spot it. Here’s our routes definitions:
const routes: Array<RouteRecordRaw> = [
{
path: "/",
redirect: "/login",
},
{
path: "/login",
name: "Login",
component: Login,
},
{
path: "/tabs/",
component: Tabs,
children: [
{
path: "feed/",
name: "Feed",
component: Feed,
meta: {
requiresLogin: true,
},
},
{
path: "help",
name: "Help",
component: () => import("@/views/Help.vue"),
meta: {
requiresLogin: true,
},
},
{
path: "profile",
name: "Profile",
component: () => import("@/views/Settings.vue"),
meta: {
requiresLogin: true,
},
},
{
path: "profile/text-size",
name: "TextSize",
component: () => import("@/views/SettingTextSize.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "profile/scroll-speed",
name: "ScrollSpeed",
component: () => import("@/views/SettingScrollSpeed.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "feed/blog/slug-:slug",
name: "View Blog No ID",
component: () => import("@/views/ViewBlog.vue"),
beforeEnter: async (to, from, next) => {
const result = await contentApi.get(`/industries/1/content/slug-${to.params.slug}`);
next({
name: "View Blog",
params: {
contentId: result.data.content.id,
}
});
},
meta: {
requiresLogin: true,
},
},
{
path: "feed/blog/:contentId",
name: "View Blog",
component: () => import("@/views/ViewBlog.vue"),
meta: {
requiresLogin: true,
},
},
{
path: "feed/videos/:contentId",
name: "View Video",
component: () => import("@/views/ViewVideo.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["pro"],
},
},
{
path: "feed/script/:contentId",
name: "View Script",
component: () => import("@/views/ViewScript.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
beforeEnter: async (to, from, next) => {
/** reset script store data to make sure previous script doesn't show */
store.dispatch("scriptStore/reset");
next();
}
},
],
},
{
path: "/rt/:scriptId",
name: "RT",
component: () => import("@/views/RTHome.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "/rt/:scriptId/rehearse",
name: "RT Rehearse",
component: () => import("@/views/TeleprompterPage.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "/rt/:scriptId/record",
name: "RT Record",
component: () => import("@/views/TeleprompterPage.vue"),
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "/rt/:scriptId/customize",
name: "Customize Script",
component: () => import("@/views/CustomizeScript.vue"),
props: true,
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
},
},
{
path: "/paywall",
name: "Paywall",
component: () => import("@/views/Paywall.vue"),
props: true,
meta: {
requiresLogin: true,
},
},
{
path: "/rt/:scriptId/preview/:filePath",
name: "Preview Video",
component: () => import("@/views/RTPreview.vue"),
props: true,
meta: {
requiresLogin: true,
requiresFeatures: ["premium"],
}
}
];
Our app has a home view with 3 tabs. One of the tabs is a list of content, when you view a piece of content it stays within the tab view as a child page. There’s also a handful of pages that should show without the tab view.
If I open the app, navigate to ANY second page within the tabbed parent view, then to a view without the tabs, then go back to a view with tabs. I get the “TypeError: Cannot read property ‘classList’ of undefined”… Here’s the example chain of pages I’m navigating through to cause the error:
/tabs/feed
/tabs/feed/blog/3853
(BACK) /tabs/feed
/tabs/feed/script/3818
/rt/3818
(BACK) /tabs/feed/script/3818 -- breaks before this page loads, cannot read property 'classlist' of undefined
Changing to use createWebHashHistory or createMemoryHistory does not help. All of the pages involved have an element and have the IonPage component registered.
We’re using ionic-native/core 5.36.0, ionic/vue 5.9.3, and ionic/vue-router 5.9.3… I’m at a total loss for what to do
1 post - 1 participant