Incomplete Warning for extendRoutes.

[TomT15]

Looking for answers on how to redirect i stumbled on discussion 63.
#63

When attempting to implement the solution i got a warning.
"extendRoutes()" is deprecated, please modify the routes directly. See

im not sure if this was not a completed message or if im being dense. If the latter im sorry im just trying to make my way through things.

[posva]

It’s the same code as 63 but simply modify the routes array(that is now explicitly imported) directly

[TomT15]

Thanks for getting back so frequently to my questions and again sorry if im being dense.

I believe this is the code you were talking about with modifications.

router/index.ts

const router = createRouter({
extendRoutes: (routes) => {
    const targetRoute = routes.find((r) => r.path === '/')
    if (targetRoute) {
      targetRoute.redirect = { name: '/dashboards/admin' }
    }
    return routes
  },
  history: createWebHistory(import.meta.env.VITE_BASE_ROUTE)
});

When executing that code, i am unable to find the path '/'

RouteNamedMap

export interface RouteNamedMap {
    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
    '/admin/': RouteRecordInfo<'/admin/', '/admin', Record<never, never>, Record<never, never>>,
    '/admin/usertrails/': RouteRecordInfo<'/admin/usertrails/', '/admin/usertrails', Record<never, never>, Record<never, never>>,
    '/client/clients': RouteRecordInfo<'/client/clients', '/client/clients', Record<never, never>, Record<never, never>>,
    '/client/users': RouteRecordInfo<'/client/users', '/client/users', Record<never, never>, Record<never, never>>,
    '/dashboards/admin': RouteRecordInfo<'/dashboards/admin', '/dashboards/admin', Record<never, never>, Record<never, never>>,
    '/dashboards/dealer': RouteRecordInfo<'/dashboards/dealer', '/dashboards/dealer', Record<never, never>, Record<never, never>>,
    '/dashboards/user': RouteRecordInfo<'/dashboards/user', '/dashboards/user', Record<never, never>, Record<never, never>>,
  }

error: Uncaught TypeError: routes2 is undefined

Essentially it is unable to find that path with the given routes

[TomT15]

Maybe im just extremely dense but this worked for me.

const router = createRouter({
  routes,
  extendRoutes: (routes) => {
    const targetRoute = routes.find((r) => r.path === '/')
    if (targetRoute) {
      targetRoute.redirect = { name: '/dashboards/admin' }
    }
    return routes
  },
  history: createWebHistory(import.meta.env.VITE_BASE_ROUTE)
});

routes was imported above and then extended below.

Thank you for the hard work Posva.

[posva]

I'm glad you found a way! So you can avoid the deprecation warning with:

const targetRoute = routes.find((r) => r.path === '/')
if (targetRoute) {
  targetRoute.redirect = { name: '/dashboards/admin' }
}
const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.VITE_BASE_ROUTE)
});

[TomT15]

Thank you so much Mr. Posva. I really appropriate your hard work and for you going out of your way to help me with these issues.

Could I bother you for one last thing?
#406 (reply in thread)

im having issues using a store inside of definePage. Thank you

[mfwonghk]

Hello! I am quite new to Vue and this plugin. I'm using "unplugin-vue-router": 0.9.0 with "vite-plugin-vue-layouts": 0.11.0

Following the guides currently I have these in my router js:

// Composables
import { createRouter, createWebHistory } from 'vue-router/auto';
import { routes } from 'vue-router/auto-routes';
import { setupLayouts } from 'virtual:generated-layouts';

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: setupLayouts(routes)
});

How can I implement the redirect method above? Please help. Thanks a lot!

Edit: Solved! I can use the same

const targetRoute = routes.find((r) => r.path === '/')
if (targetRoute) {
  targetRoute.redirect = { name: '/dashboards/admin' }
}

before createRouter(), but I also need to create a empty index.vue in my root to generate the path first.