Support redirect option in custom route block

[zhiyuanzmj]

<template>
  <div />
</template>

<route lang="yaml">
redirect: /system/settings
meta:
  icon: i-iconoir:settings
  permission: true
</route>

[posva]

Right now, redirect records can be added through extendRoutes.
I’m not sure if there should be another way to add them but one shouldn’t write an empty component just for a redirect 🤔

maybe we can find other ways

[hi-reeve]

Right now, redirect records can be added through extendRoutes. I’m not sure if there should be another way to add them but one shouldn’t write an empty component just for a redirect 🤔

maybe we can find other ways

stumble upon this exactly today, ended up creating empty page to redirecting to the intended route. probably adding it to the docs is a good choice for now

[zhiyuanzmj]

Now I'm defining the redirect with definePage macro instead of the custom route block, It works well ✌️.

[posva]

I still think redirects should be defined without the need of creating an empty component. I'm thinking of different possibilities:

• Adding a defineRedirect() macro that can be defined within pages but this has two issues: it's yet, another macro, and it also doesn't necessarily relate to the page component where it is used as the function syntax (which is often necessary when params are involved) stil allows redirecting anywhere:

  defineRedirect('/from-other-page') // redirects to this page
  defineRedirect(['/multiple', '/redirects'])
  defineRedirect(to => ({ name: 'this could be another route' }))
  defineRedirect(to => '/this could also be another route')

• Allowing a redirects option with createRouter() but it adds to the bundle
• Allowing defining redirects within a special file redirects.ts (or js) that exports an array or an object and is read at built time

  // src/redirects.ts or src/pages/_redirects.ts
  export default {
    '/': '/static-redirect', // simplest
    'named-route': '/target-redirect',
    '/other': { name: 'static object redirect' },
    '/with/:param': to => ({ name: 'user', params: { id: to.params.param }})
  }

To me, the last one makes the most sense, it's also easy to create the file by default with an empty object and some comments to point out how to use it

[amirtbi]

Right now, redirect records can be added through extendRoutes. I’m not sure if there should be another way to add them but one shouldn’t write an empty component just for a redirect 🤔

maybe we can find other ways

How can define redirect in extendRoutes?

[amirtbi]

Could you explain it how you did?

[liujinle]

Could you explain it how you did?你能解释一下你是怎么做到的吗？

you can use the definePage() macro , it work better

[Soviut]

I think the last option is a good one. It might be worth calling the file simply routes.ts so that other router-related things can be defined in it for that directory and sub-directories, For example, it would be a good place to put meta data for all sub-routes.

I seem to recall this mentioned elsewhere in one of the discussions here, so perhaps the two can be combined?

[aviorp]

• defineRedirect

can you show a simple example for how we can do it ?

[pcaselas]

How are you supposed to do the redirect?

 extendRoute: (route) => {
        if (route.name === '/settings/developer') {
          route.redirect = '/settings/developer/api_keys'
        }
        return route
 },

This doesn't seem to work

[posva]

The best way to do this is by pushing new routes at runtime:

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

routes.push({
  path: '/path-to-redirect',
  redirect: '/redirected-path',
})

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

When this issue was created, the routes were not exposed so it was different but at the moment, this is not worth a new API. This way, nothing new needs to be added. Since this route won't be included in typings, there will be no mistake of referencing the path in the application but it will still work if the user directly visits the page.