路由重定向（redirect）

当我们有一个嵌套路由，正常情况下，我们是需要点击子路由，才会渲染子路由对应的组件。如果我想这样，一进入到父路由组件页面在父路由页面中就渲染指定的子路由对应的组件，这时候可以使用redirect路由重定向。

路由重定向也是通过在 routes 中配置来完成。

重定向redirect的值可以是路由配置里边的path或是name，甚至是一个方法：

------ path ------
const routes = [
    { 
        path: '/', 
        redirect: '/home', 
        children: [
            {
                path: '/home',
                component: Home
            }
        ] 
     }
]

------ name ------
const routes = [
    { 
        path: '/', 
        redirect: 'home', 
        children: [
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ] 
     }
]

------ function ------
const routes = [
    { 
        path: '/', 
        redirect: (to) => {
            redirect: to => { 
            // to是父路由的信息
            // return 重定向的字符串路径/路径对象 
            return { path: '/home', query: { q: to.params.searchText } } }
        }, 
        children: [
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ] 
     }
]

注意点：

如果是一个嵌套路由，父路由配置了redirect重定向，并且设置了components对应的组件，那么父路由对应的组件中必须添加router-view才能够在父路由对应的组件中渲染出来重定向目标子路由对应的组件。
如果是一个嵌套路由，父路由配置了redirect重定向，没有设置components对应的组件，那么本来是渲染父路由对应组件的router-view能够直接渲染出来重定向目标子路由对应的组件，因为父路由没有设置渲染的对应的组件，所以，本来是渲染父路由对应组件的router-view，这时直接能够渲染重定向目标子路由对应的组件。

示例1：

路由配置：

const routes: RouteRecordRaw[] = [
  {
    path: '/', // router-link组件默认展示path为'/'对应的组件
    component: () => import('@/views/list.vue'),
    redirect: '/login',
    children: [
      {
        path: 'login',
        name: 'login',
        redirect: '/login/detail',
        component: () => import('@/views/login.vue'),
        children: [],
      },
    ],
  },
]

App.vue:

<template>
  <div>
    <!-- 路由视图组件 -->
    <router-view></router-view>
  </div>
</template>

list.vue:

<template>
  <div>
    list
    <!-- 路由视图组件 -->
    <router-view></router-view>
  </div>
</template>

login.vue:

<template>
  <div class="login">
    login
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.login {
  background-color: pink;
}
</style>

效果：

此时可以看得出来，App.vue中的router-view渲染的是list.vue也就是父路由 / 对应的组件，list.vue中的router-view渲染的是login.vue组件，也就是子路由 /login 对应的组件。

示例2: 路由配置：

const routes: RouteRecordRaw[] = [
  {
    path: '/', // router-link组件默认展示path为'/'对应的组件
    redirect: '/login',
    children: [
      {
        path: 'login',
        name: 'login',
        redirect: '/login/detail',
        component: () => import('@/views/login.vue'),
        children: [],
      },
    ],
  },
]

效果：

我们把路由配置中父路由的component属性给去掉了，也就是路由 / 没有对应的组件，App.vue 中的router-view就会直接渲染重定向目标子路由对应的组件。

路由别名

路由别名就是给路由取多个名字，比如：

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        alias: ['/home', '/home1', '/home2']
    }
]

如上面的配置，当我们在地址栏后面输入 /home、 /home1 或 /home2时，router-view组件渲染的还是Home.vue。设置了alias路由别名其实就是增加了一个匹配规则，路由别名对应组件的关系，如果没有这个对应关系那么就渲染不出来。

第六章-路由重定向以及别名

路由重定向（redirect）

路由别名