components下新建Welcome.vue，前面创建vue文件的时候命名有点不统一，在这里修改一下：

Welcome.vue:

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

<script>
  export default {
    name: 'Welcome'
  }
</script>

<style lang="less" scoped>

</style>

Home.vue在<el-main>位置添加:

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

router下index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/Login'
import Home from '../components/Home'
import Welcome from '../components/Welcome'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
     //子组件
    children: [{ path: '/welcome', component: Welcome }]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪一个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next('/login') 跳转
  if (to.path === '/login') return next()
  //获取token
  const tokenStr = window.sessionStorage.getItem('token')
  //没有token，强制跳转登录页
  if (!tokenStr) return next('/login')
  // 放行
  next()
})

export default router

成功：