vue3 - 38.router.8 - 路由重定向 / 别名

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