Vue 项目中 Main 区域的路由重定向设置

对 Main 的内容进行路由设置

实现首页路由的重定向

创建 Welcome 组件

<template>
  <div>
    <h3>Welcome</h3>
  </div>
</template>

配置 Home 页面重定向

{
  path: '/home',
  component: Home,
  redirect: '/welcome',
  children: [
    { path: '/welcome', component: Welcome }
  ]
}

页面链接会跳转到 /welcome，但此时的页面内容没有发生任何变化，仍然是 Home.vue 中的内容。

所以，此时需要在 Home.vue 中添加路由占位符，这样 <el-main></el-main> 内容就会指向 /home 的子路由组件 Welcome.vue 了。

<el-main>
  <!-- 路由占位符 -->
  <router-view></router-view>
</el-main>