1.我们用redirect来实现路由重定向,当我们访问项目的时候,可以通过重构定向来自动默认打开指定的页面
1)字符串形式配置:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
{
path:'/',
component:() => import('../components/root.vue'),
redirect:'/user1',
children:[
{
path:"/user1",
components:{
default:() => import('../components/A.vue')
}
},
{
path:"/user2",
components:{
bbb:() => import('../components/B.vue'),
ccc:() => import('../components/C.vue')
}
},
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
2)对象形式配置:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
{
path:'/',
component:() => import('../components/root.vue'),
redirect:{path:'/user1'},
children:[
{
path:"/user1",
components:{
default:() => import('../components/A.vue')
}
},
{
path:"/user2",
components:{
bbb:() => import('../components/B.vue'),
ccc:() => import('../components/C.vue')
}
},
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
3)函数模式配置,可传参
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
{
path:'/',
component:() => import('../components/root.vue'),
redirect:(to) => {
return {
path:"/user1",
query:to.query
}
},
children:[
{
path:"/user1",
components:{
default:() => import('../components/A.vue')
}
},
{
path:"/user2",
components:{
bbb:() => import('../components/B.vue'),
ccc:() => import('../components/C.vue')
}
},
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
2.别名:alias
将 / 别名为 /root,意味着当用户访问 /root时,URL 仍然是 /user,但会被匹配为用户正在访问
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
{
path:'/',
component:() => import('../components/root.vue'),
alias:['/root1','/root2','/roo3'],
children:[
{
path:"/user1",
components:{
default:() => import('../components/A.vue')
}
},
{
path:"/user2",
components:{
bbb:() => import('../components/B.vue'),
ccc:() => import('../components/C.vue')
}
},
]
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router