Vue Router 重定向到动态的 path 中
背景
在 vue-router 中,重定向到某个页面采用下面的配置
const routes = [
{
path: '/test',
redirect: '/aaa',
},
]
但是如果 redirect 中的路径需要动态生成,由于定义的时候是同步代码,无法直接给 redirect 赋值。
async function reqRedirectUrl() {
return '/aaa'
}
const routes = [
{
path: '/test',
redirect: '***',
},
]
解决方案
在定义路由是,使用 beforeEnter 进行拦截,该函数可以定义为 async 函数,
里面就可以获取到了动态的路径,再把路径传入到 next 中,实现了动态的重定向
async function reqRedirectUrl() {
return '/aaa'
}
const routes = [
{
path: '/test',
// vue 3 需要加上重定向字段,值随便写
// redirect: '',
async beforeEnter (to, from, next) {
next(await reqRedirectUrl())
}
},
]
注意
如果有什么更好的方案,欢迎评论一起学习,目前找到的解决办法就是这样