【Vue】router-view 嵌套

一、背景

• 项目中同时包含前台页面展示和后台管理系统，两个页面需要分别使用 router-view 进行组件切换
  • 前台页面组件出口
    
  • 后台页面组件出口

二、问题

• 后台基础页面插入 router-view 后点击左侧链接 router-link 跳转空白页
  • 应该这样
    
  • 实际这样

三、解决

• 后台顶级路由添加重定向，防止父路径丢失
• 添加子路由跳转链接
• 路由设置中子路由 path 禁添 '/'，否则会变成根路径

// 后台登录入口
<router-link to="/backend" class="right"> // 可在此重定向 to="/backend"，为清晰实际放到 router/index.js
  <img src="@/assets/img/profile.jpg" alt="">
  <span>私人重地</span>
</router-link>

// router/index.js 嵌套路由设置
const routes = [
  // 前台路由
  {
    path: '/', // 有 '/' 全是根路由
    name: 'MyHome',
    // 懒加载
    component: () => import('../views/MyHome'),
  },
  {
    path: '/article', // 有 '/' 全是根路由
    name: 'MyArticle',
    component: () => import('../views/MyArticle.vue')
  },
  // 后台路由
  {
    path: '/backend', // 有 '/' 全是根路由
    // 重定向
    redirect: '/backend/behome', // 在这重定向最直观，也可在跳转该页面的 router-link to 设置，防止父路径丢失
    name: 'MyBackEnd',
    component: () => import('../views/backend/MyBackEnd.vue'),
    // 要开始子路由了，path 不能有 '/'，否则变根路由，切记切记
    children: [ 
      {
        path:'behome', // 没有 '/'
        name:'BeHome',
        component: () => import('../views/backend/BeHome.vue')
      },
      {
        path:'comments', // 没有 '/'
        name:'BeComment',
        component: () => import('../views/backend/BeComment.vue')
      },
      {
        path:'user', // 没有 '/'
        name:'BeUser',
        component: () => import('../views/backend/BeUser.vue')
      },
      {
        path:'set', // 还是没有 '/'
        name:'BeSet',
        component: () => import('../views/backend/BeSet.vue')
      },
    ]
  },
]

// 后台侧边栏，点击切换组件
<template>
    <el-container>
      <!-- 侧边栏 -->
      <div class="aside">
        <el-aside width="200px">
          <div class="bloger">
            <img src="@/assets/img/profile.jpg" alt="">
            <p>百日梦想家</p>
          </div>
          <el-row class="tac">
            <el-col :span="24">
              <el-menu default-active="2">
                  <router-link to="behome"> // 直接跳转该页面丢失父路由，需在 router/index.js 或后台登录入口重定向
                    <el-menu-item index="1">
                      <i class="el-icon-s-home"></i>
                      <span slot="title">主页</span>
                    </el-menu-item>
                  </router-link>

				<router-link to="comments"> // 子路由绝对不要添加 '/'
                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-document"></i>
                      <span>文章</span>
                    </template>
                  </el-submenu>
				</router-link>
 
                  <router-link to="comments"> // 子路由绝对不要添加 '/'
                    <el-menu-item index="3">
                      <i class="el-icon-s-comment"></i>
                      <span slot="title">评论</span>
                    </el-menu-item>
                  </router-link>

                  <router-link to="user"> // 子路由绝对不要添加 '/'
                    <el-menu-item index="4">
                      <i class="el-icon-user"></i>
                      <span slot="title">用户</span>
                    </el-menu-item>
                  </router-link>

                  <router-link to="set"> // 子路由绝对不要添加 '/'
                    <el-menu-item index="5">
                      <i class="el-icon-setting"></i>
                      <span slot="title">设置</span>
                    </el-menu-item>
                  </router-link>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
      </div>
      
      <el-container>
          <el-main>
            <div class="content">
              <router-view/> // 组件出口在这里！！！这里！！！这是 App 之外的第二个组件出口
            </div>
          </el-main>
        </el-container>
        
    <el-container>
  <template>