How do I add redirect routes with the experimental file router (also without polluting the types)?

[ZachHaber]

I'm using the experimental router with the new param parsing functionality, but I've run into an issue. I'm trying to add in a 404 catch-all route to do some redirecting from both the root and very old urls/bookmarks that might exist without certain path params to add them back in. Based on that, I was using /:patchMatch(.*)* as my path for the redirection. I also have a couple more specific redirects that I was trying to add in addition as well.

The docs explicitly mention that you can add redirect routes through the routes array and that it can be useful to avoid having the redirects influence the compile-time type definitions.

routes.push(
  {
    path: '/:env/:appId/request/:id?',
    redirect: '/:env/:appId/record/:id?',
  },
  {
    path: '/:env/:appId/:option/overview',
    redirect: '/:env/:appId/overview/:option',
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: (to) => {
      // If it's an old link, make it go towards production!
      // and try again!
      if (/^\/\d+\//.test(to.path)) {
        return `/p${to.fullPath}`;
      }
      return {
        name: 'Home',
        params: {
          env: to.params.env ?? getEnv(),
        },
      };
    },
  },
);

I was only able to figure out why that wasn't working when out of desperation, I swapped router.js to router.ts and was confused that routes was showing a TS error. I looked into it and saw "This router does not have addRoute() and removeRoute()..."

When I tried to add a new page [...path].vue as recommended by the docs for a catch-all/404 route using the same redirect as I was previously using, I ran into an issue where it isn't even running the redirect (I put a console.log in at the start to check) but it was telling me "Detected a possibly infinite redirection in a navigation guard when going from "/" to "/". Aborting to avoid a Stack Overflow." As it turns out, the redirect wasn't firing, so my global beforeEach navguard triggers instead, and it wasn't built for needing to handle the redirect. Not only that, the new route was affecting the type definitions as well which is something I would have preferred to have avoided to be able to actually benefit fully from the enhanced type definitions of the params parsing. For example, every single route has a root [env] param defined so I can just use an unknown route.params.env and TS will know what it is, while if one of the redirect routes are added, then it will no longer appear to exist without narrowing out the various redirect routes.

This is what I have in that [...path].vue page. The redirect seems fine but is never called.

<script setup lang="ts">
import { getEnv } from '@/utility/getEnv';

definePage({
  redirect(to, from) {
    console.log(to, from);
    // If it's an old link, make it go towards production!
    // and try again!
    if (/^\/\d+\//.test(to.path)) {
      return `/p${to.fullPath}`;
    }
    // return '/t/home';
    return {
      name: 'Home',
      params: {
        env: 'env' in to.params ? to.params.env : getEnv(),
        collectionId: null,
      },
    };
  },
});
</script>
<template><div></div></template>

I'm unsure how to get even the redirect to function at all. I'm having similar issues with my old options api components not triggering their in-component nav guards.

[barry166]

For redirect-only records that should not affect typed routes, add them to the imported routes array before createRouter() and do not create a [...path].vue file. A catch-all file route is a real generated route, so it is expected to show up in the route map/types.

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

routes.push({
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    if (/^\/\d+\//.test(to.path)) return `/p${to.fullPath}`
    return { name: 'Home', params: { env: getEnv() } }
  },
})

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

That is different from router.addRoute() after the router exists. For the infinite redirect warning, make sure the catch-all/default branch never returns the same location currently being resolved; handle / explicitly if your global guard also redirects it.

[ZachHaber]

The issue I ran into here is that the experimental router doesn't seem to support a routes array, it only supports adding the resolver and also doesn't have addRoute to modify the router.
The experimental router I'm referring to is this from the docs:

// src/router/index.ts
import { createWebHistory } from 'vue-router'
import { experimental_createRouter as createRouter } from 'vue-router/experimental'
import { resolver, handleHotUpdate } from 'vue-router/auto-resolver'

export const router = createRouter({
  history: createWebHistory(),
  resolver,
})

if (import.meta.hot) {
  handleHotUpdate(router)
}

[posva]

yes, the current version is static but there are plans for dynamic as well. And the routes array cannot really be manipulated the same way because it has a different format (compiled at build time)

[posva]

If you want to omit teh page from the generated types, set name: false inside of definePage()

[posva]

What do you mean? to and from are the same

[ZachHaber]

For example, I need a redirect like:

  router.addRoute({
    path: '/:env/:appId/request/:id?',
    redirect: '/:env/:appId/record/:id?',
  });

It isn't matching when name is false, so I have to parse the fullpath to figure out the params and construct the redirect route from there within the beforeEach global navguard.

[posva]

that redirect syntax doesn't work anymore, does it? I thought I removed it in v4, so manually passing the params is expected. if you check the route.name, those are typed, so it should be even better

[ZachHaber]

Yup. You're right that doesn't work anymore. (I've been updating this app from vue 2 for the last while), so there's a ton of things involved in the migration that are rather hard to find.
The point I was making with that remains though just with new syntax):

  router.addRoute({
    path: '/:env/:appId/request/:id?',
    redirect(to, from) {
      return {
        name: 'Edit Record',
        params: {
          ...to.params,
        },
      };
    },
  });

In order to perform the redirect in the global beforeEach, I'd either need a route that matches - which doesn't happen in the case of name: false or I need to manually parse the /p/3/request/4 to it's relevant parts to construct the new RouteLocationRaw to return from the beforeEach to redirect.

  if (
    to.name === undefined ||
    typeof to.name === 'symbol' // symbol(no-match) doesn't appear to be exposed.
  ) {
    const toVal = to as RouteLocationNormalizedGeneric;
    if (/^\/\d+\//.test(toVal.path)) {
      return `/p${toVal.fullPath}`;
    }
    const oldRequestPattern = new URLPattern({
      pathname: '/:env(t|p)/:appId(\\d+)/request{/:id(\\d+)}?',
    });
    const oldRequest = oldRequestPattern.exec(`https://test.com${toVal.path}`);
    if (oldRequest) {
      return {
        name: 'Edit Record',
        params: {
          appId: oldRequest.pathname.groups.appId!,
          env: oldRequest.pathname.groups.env as Environment,
          id: +oldRequest.pathname.groups.id!,
        },
      };
    }

[ZachHaber]

Okay, so after some double checking, I can use the alias functionality for that one at least and then can check to see if that route is matched with an aliasOf property, if it is, redirect it with the same name and params to get it to redirect to the new path rather than just render with the old one.