订单管理

上面的效果，可以使用vue-router的嵌套路由来实现，根据不同的子路径，来指定部分内容改变，不会切换公共部分内容。

个人中心

订单列表位于用户中心页面，所以我们接下来先完善头部子组件中的跳转链接。

src/components/Header.vue，代码：

              <el-dropdown>
                <span class="el-dropdown-link">
                  <router-link  to="/user">
                  <el-avatar class="avatar" size="50" src="https://fuguangapi.oss-cn-beijing.aliyuncs.com/avatar.jpg"></el-avatar>
                  </router-link>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled"><router-link to="/user">个人中心</router-link></el-dropdown-item>
                    <el-dropdown-item :icon="List">订单列表</el-dropdown-item>
                    <el-dropdown-item :icon="Setting">个人设置</el-dropdown-item>
                    <el-dropdown-item :icon="Position" @click="logout">注销登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

个人中心页面效果展示，个人信息页面：

我的订单页面：

个人中心主页面，src/views/User.vue，代码：

<template>
  <Header></Header>
  <main class="clearfix">
    <div class="bg-other user-head-info">
      <div class="user-info clearfix">
        <div class="user-pic" data-is-fans="0" data-is-follows="">
            <div class="user-pic-bg"><img class="img" :src="store.state.user.avatar" alt=""></div>
        </div>
        <div class="user-info-right">
          <h3 class="user-name clearfix"><span>墨落</span></h3>
          <p class="about-info">
            <span>男</span>
            <span>CG影视动画师</span>
          </p>
        </div>
        <div class="user-sign hide">
          <p class="user-desc">这位同学很懒，木有签名的说～</p>
        </div>
        <div class="study-info clearfix">
          <div class="item follows">
            <div class="u-info-learn" title="学习时长16分" style="cursor:pointer;">
              <em>0.28h</em>
              <span>学习时长 </span>
            </div>
          </div>
          <div class="item follows">
            <router-link to="/u/index/credit"><em>0</em></router-link>
            <span>积分</span>
          </div>
          <div class="item follows">
            <router-link to="/u/index/follows"><em>12</em></router-link>
            <span>关注</span>
          </div>
          <div class="item follows">
            <router-link to="/user/setbindsns" class="set-btn"><i class="icon-set"></i>个人设置</router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="main clearfix">
      <div class="slider l">
        <h1>个人中心</h1>
        <ul class="nav-menu">
          <li class="clearfix" :class="{active:route.path === '/user'}">
            <router-link to="/user">
              <p class="nav-name l">个人信息</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
          <li class="clearfix" :class="{active:route.path === '/user/course'}">
            <router-link to="/user/course">
              <p class="nav-name l">我的课程</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
          <li class="clearfix" :class="{active:route.path === '/user/order'}">
            <router-link to="/user/order">
              <p class="nav-name l">我的订单</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
          <li class="clearfix" :class="{active:route.path === '/user/balance'}">
            <router-link to="/user/balance">
              <p class="nav-name l">我的余额</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
          <li class="clearfix" :class="{active:route.path === '/user/coupon'}">
            <router-link to="/user/coupon">
              <p class="nav-name l">我的优惠券</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
          <li class="clearfix" :class="{active:route.path === '/user/bill'}">
            <router-link to="/user/bill">
              <p class="nav-name l">我的消费记录</p>
              <span class="el-icon-caret-right r"></span>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 嵌套路由，也是依靠router-view来加载不同的子页面内容 -->
      <router-view></router-view>
    </div>
  </main>
  <Footer></Footer>
</template>
<script setup>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"
import settings from "../settings";
import {useStore} from "vuex"
import {useRoute} from "vue-router"
const store = useStore()
const route = useRoute()
</script>
<style scoped>
main{
  margin-bottom: 40px;
}
.bg-other {
    background: url("../assets/user_bg.png") no-repeat center top #000;
    background-size: cover;
}
.user-head-info{
  min-height: 200px;
}
.user-head-info .user-info {
    position: relative;
  width: 1500px;
    margin: 0 auto;
  min-height: 200px;
}
.user-head-info .user-info .user-pic {
    float: left;
    width: 148px;
    height: 148px
}
.user-head-info .user-info .user-pic .user-pic-bg {
    border: 4px solid #fff;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
    width: 140px;
    height: 140px;
    position: relative;
    border-radius: 50%;
    background: #fff;
    top: 24px
}
.user-head-info .user-info .user-pic .user-pic-bg .img {
    text-align: center;
    width: 140px;
    height: 140px;
    border-radius: 50%
}
.user-head-info .user-info .user-info-right {
    float: right;
    width: 1330px;
}
.user-head-info .user-info .user-name {
    font-weight: 600;
    text-align: left;
    font-size: 24px;
    color: #fff;
    line-height: 28px;
    margin-top: 48px;
  margin-bottom: 10px;
}
.user-head-info .user-info .about-info {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    text-align: left;
    margin-top: 6px;
  display: block;
}
.user-head-info .user-info .about-info span {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    color: #fff;
    line-height: 20px
}
.user-head-info .user-info .user-sign {
    font-size: 14px;
    color: #fff;
    line-height: 24px;
    width: 440px;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word
}
.user-head-info .user-info .user-desc {
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    text-align: left;
    margin-top: 20px;
    word-break: break-all;
    word-wrap: break-word;
    opacity: .8;
    margin-left: 24px
}
.user-head-info .study-info {
    position: absolute;
    top: 48px;
    right: 10px;
    min-width: 200px;
    text-align: right
}
.user-head-info .study-info .item {
    line-height: 48px;
    vertical-align: middle;
    height: 48px;
    float: left
}
.user-head-info .study-info .item em {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: rgba(255,255,255,.8);
    line-height: 28px
}
.user-head-info .study-info .item span {
    display: block;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,.8);
    line-height: 20px;
    margin-top: 4px
}
.user-head-info .study-info .follows {
    margin-right: 24px
}
.user-head-info .study-info .set-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 18px;
    font-size: 14px;
    color: rgba(255,255,255,.8);
    line-height: 20px;
    height: 20px
}
.user-head-info .study-info .set-btn i {
    font-size: 16px;
    display: inline-block;
    margin-right: 4px
}
.user-head-info .study-info .set-btn:hover {
    color: #fff;
    border-color: #fff
}
.l {
    float: left;
}
.r {
    float: right;
}
.clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.main{
  width: 1500px;
  margin: 36px auto;
}
.slider {
    margin-right: 32px;
    width: 180px;
    box-sizing: border-box
}
.slider h1 {
    padding-bottom: 16px;
    font-size: 14px;
    color: #4d555d;
    line-height: 32px;
    border-bottom: 1px solid #d9dde1
}
.slider .nav-menu {
    width: 100%
}
.slider .nav-menu li {
    margin-top: 16px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    color: #4d555d
}
.slider .nav-menu li a {
    color: #07111b
}
.slider .nav-menu li a:hover {
    color: #f01414
}
.slider .nav-menu li .nav-name {
    font-size: 14px
}
.slider .nav-menu li .el-icon-caret-right {
    font-size: 16px;
    line-height: 32px
}
.slider .nav-menu li:hover {
    color: #07111b
}
.slider .nav-menu li:hover a {
    color: #07111b
}
.slider .nav-menu li:hover .el-icon-caret-right {
    color: #07111b
}
.slider .nav-menu li.active {
    color: #f01414
}
.slider .nav-menu li.active a {
    color: #f01414
}
.slider .nav-menu li.active a:hover {
    color: #f01414
}
.slider .nav-menu li.active .el-icon-caret-right {
    color: #f01414
}
</style>

个人信息页面效果展示

src/components/user/Info.vue，代码：

<template>
  <div class="setting-right">
   <div class="setting-right-wrap wrap-boxes settings">
    <div class="formBox">
     <div id="setting-profile" class="setting-wrap setting-profile">
      <div class="common-title">
        个人信息
       <a href="javascript: void(0);" class="pull-right js-edit-info"><i class="el-icon-edit"></i>编辑</a>
      </div>
      <div class="line"></div>
      <div class="info-wapper">
       <div class="info-box clearfix">
        <label class="pull-left">昵称</label>
        <div class="pull-left">墨落</div>
       </div>
       <div class="info-box clearfix">
        <label class="pull-left">职位</label>
        <div class="pull-left">CG影视动画师</div>
       </div>
       <div class="info-box clearfix">
        <label class="pull-left">城市</label>
        <div class="pull-left">未设置</div>
       </div>
       <div class="info-box clearfix">
        <label class="pull-left">性别</label>
        <div class="pull-left">男</div>
       </div>
       <div class="info-box clearfix">
        <label class="pull-left">个性签名</label>
        <div class="pull-left">未设置</div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.setting-right {
    float: left;
    width: 1284px;
    box-sizing: border-box;
    background-color: #fff
}
.setting-right-wrap {
    min-height: 550px
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.common-title {
    line-height: 32px;
    font-size: 16px;
    font-weight: 700;
}
.common-title a {
    color: #93999f;
    font-weight: 400;
}
.common-title a:hover {
    color: #008cc8;
}
.common-title a i {
    color: #008cc8;
    margin-right: 4px;
    vertical-align: middle;
}
.line {
    height: 1px;
    background-color: #d0d6d9;
    margin-top: 12px;
}
.setting-profile {
    padding: 0!important
}
.setting-profile .info-wapper {
    margin: 24px auto 24px 40px
}
.setting-profile .info-box {
    margin-bottom: 12px
}
.setting-profile .info-box label {
    width: 180px;
    line-height: 20px;
    padding: 20px 0;
    text-align: center;
    background-color: #f3f5f7;
    color: #07111b;
    font-weight: 700
}
.setting-profile .info-box div {
    width: 1034px;
    margin-left: 8px;
    line-height: 20px;
    padding: 20px 0 20px 22px;
    border-bottom: 1px solid #d9dde1
}
.edit-info .wlfg-wrap textarea {
    height: 70px
}
.edit-info .wlfg-wrap input {
    font-size: 14px
}
</style>

我的订单页面展示

src/components/user/Order.vue，代码：

<template>
      <div class="right-container l">
        <div class="right-title">
          <h2>我的订单</h2>
          <ul>
            <li class="action"><router-link to="/user/order">全部<i class="js-all-num">3</i></router-link></li>
            <li><router-link to="/user/order?type=unpaid">未支付</router-link></li>
            <li><router-link to="/user/order?type=paid">已完成</router-link></li>
            <li><router-link to="/user/order?type=invalid">已废弃</router-link></li>
          </ul>
        </div>
        <div class="myOrder">
          <ul class="myOrder-list">
            <li data-flag="2107312249236254">
              <p class="myOrder-number">
                <i class="imv2-receipt"></i>订单编号：2107312249236254
                <span class="date">2021-07-31 22:49:23</span>
                <i class="imv2-delete js-order-del" title="删除订单"></i>
                <router-link to="/user/help" target="_blank" class="myfeedback r">售后帮助</router-link>
              </p>
              <div class="myOrder-course clearfix">
                <dl class="course-del l">
                  <dd class="clearfix">
                    <router-link to="" class="l"><img class="l" src="" width="160" height="90"></router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/525"><p class="course-name">晋级TypeScript高手，成为抢手的前端开发人才</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥358.00</span>
                      </p>
                    </div>
                  </dd>
                  <dd class="clearfix">
                    <router-link to="" class="l"><img class="l" src="" width="160" height="90"></router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/525"><p class="course-name">晋级TypeScript高手，成为抢手的前端开发人才</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥358.00</span>
                      </p>
                    </div>
                  </dd>
                </dl>
                <!-- 使用优惠券 -->
                <div class="course-money l pt15">
                  <div class="wrap">
                    <div class="type-box clearfix mb10">
                      <p class="type-text l">原价</p>
                      <p class="type-price l line-though"><span class="RMB">¥</span>399.00</p>
                    </div>
                    <div class="type-box clearfix mb10">
                      <p class="type-text l">折扣</p>
                      <p class="type-price l">-<span class="RMB">¥</span>41.00</p>
                    </div>
                    <div class="total-box clearfix">
                      <p class="type-text l">实付</p>
                      <p class="type-price l"><span class="RMB">¥</span>358.00</p>
                    </div>
                  </div>
                </div>
                <div class="course-action l">
                  <a class="pay-now" href="/pay/cashier?trade_number=2108100232047715">立即支付</a>
                  <a class="order-cancel" href="javascript:void(0);">取消订单</a>
                </div>
              </div>
            </li>
            <li data-flag="2107312108465190">
              <p class="myOrder-number">
                <i class="imv2-receipt"></i>订单编号：2107312108465190
                <span class="date">2021-07-31 21:08:46</span>
                <i class="imv2-delete js-order-del" title="删除订单"></i>
                <router-link to="/user/help" target="_blank" class="myfeedback r">售后帮助</router-link>
              </p>
              <div class="myOrder-course clearfix">
                <dl class="course-del l">
                  <dd class="clearfix">
                    <router-link to="/course/301" class="l">
                      <img class="l" src="" width="160" height="90">
                    </router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/301"><p class="course-name">Hadoop 系统入门+核心精讲</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥288.00</span>
                      </p>
                    </div>
                  </dd>
                  <dd class="clearfix">
                    <router-link to="/course/464" class="l">
                      <img class="l" src="" width="160" height="90">
                    </router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/464"><p class="course-name">Kubernetes 入门到进阶实战，系统性掌握 K8s 生产实践</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥299.00</span>
                      </p>
                    </div>
                  </dd>
                  <dd class="clearfix">
                    <router-link to="/course/501" class="l">
                      <img class="l" src="" width="160" height="90">
                    </router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/501"><p class="course-name">2021必修  CSS架构系统精讲 理论+实战玩转蘑菇街</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥288.00</span>
                      </p>
                    </div>
                  </dd>
                  <dd class="clearfix">
                    <router-link to="/course/503" class="l">
                      <img class="l" src="" width="160" height="90">
                    </router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/503"><p class="course-name">Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥448.00</span>
                      </p>
                    </div>
                  </dd>
                  <dd class="clearfix">
                    <router-link to="/course/522" class="l">
                      <img class="l" src="" width="160" height="90">
                    </router-link>
                    <div class="del-box l">
                      <!-- type为类型 1实战购买 2实战续费 4就业班购买 5就业班续费 -->
                      <!-- cate 订单类型 0无优惠 1组合套餐 2学生优惠 -->
                      <router-link to="/course/522"><p class="course-name"> Spring Cloud / Alibaba 微服务架构实战，从架构设计到开发实践，手把手实现</p></router-link>
                      <p class="price-btn-box clearfix">
                        <!-- 如果有优惠券 -->
                        <span class="l truepay-text">实付</span>
                        <span class="l course-little-price">￥428.00</span>
                      </p>
                    </div>
                  </dd>
                </dl>
                <!-- 使用优惠券 -->
                <div class="course-money l pt15">
                  <div class="wrap">
                    <div class="type-box clearfix mb10">
                      <p class="type-text l">原价</p>
                      <p class="type-price l line-though">
                        <span class="RMB">¥</span>
                        1811.00
                      </p>
                    </div>
                    <div class="type-box clearfix mb10">
                      <p class="type-text l">折扣</p>
                      <p class="type-price l">
                        -
                        <span class="RMB">¥</span>
                        60.00
                      </p>
                    </div>
                    <div class="total-box clearfix">
                      <p class="type-text l">实付</p>
                      <p class="type-price l">
                        <span class="RMB">¥</span>
                        1751.00
                      </p>
                    </div>
                  </div>
                </div>
                <div class="course-action l">
                  <p class="order-close">已过期</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="page" style="text-align: center">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
</template>
<script setup>
</script>
<style scoped>
.l {
    float: left;
}
.r {
    float: right;
}
.clearfix:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*****/
.right-container {
    width: 1284px;
}
.right-container .right-title {
    margin-bottom: 24px
}
.right-container .right-title::after {
    content: '';
    clear: both;
    display: block
}
.right-container .right-title h2 {
    margin-right: 24px;
    float: left;
    font-size: 16px;
    color: #07111b;
    line-height: 32px;
    font-weight: 700
}
.right-container .right-title ul {
    float: left
}
.right-container .right-title ul:before {
    float: left;
    margin-top: 2px;
    margin-right: 20px;
    content: "|";
    color: #d9dde1
}
.right-container .right-title ul li {
    float: left;
    width: 95px;
    line-height: 32px;
    text-align: center;
    font-size: 14px
}
.right-container .right-title ul li.action {
    background: #4d555d;
    border-radius: 16px
}
.right-container .right-title ul li.action a {
    color: #fff
}
.right-container .right-title ul li i {
    padding-left: 5px;
    font-style: normal
}
.right-container .right-title span {
    position: relative;
    float: right;
    color: #93999f;
    font-size: 14px;
    cursor: pointer;
    width: 128px;
    line-height: 32px
}
.right-container .right-title span i {
    float: left;
    margin-top: 8px;
    margin-left: 28px;
    margin-right: 4px;
    font-size: 16px
}
.right-container .right-title span a {
    display: block
}
.right-container .right-title span.action {
    background: #4d555d;
    border-radius: 16px
}
.right-container .right-title span.action a {
    color: #fff
}
.myOrder {
    width: 100%
}
.myOrder-list li {
    padding: 32px;
    padding-top: 0;
    box-shadow: 0 2px 8px 2px rgba(0,0,0,.1);
    margin-bottom: 24px;
    background: #fff;
    border-radius: 8px;
    position: relative
}
.myOrder-list li dd {
    margin-top: 24px;
    padding-top: 24px;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #d9dde1
}
.myOrder-list li dd a {
    display: block
}
.myOrder-list li dd:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0
}
.myOrder-list li:hover {
    -webkit-box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
    box-shadow: 0 2px 16px 2px rgba(0,0,0,.1)
}
.myOrder-list li:hover .myOrder-number a,.myOrder-list li:hover i.imv2-delete {
    display: block
}
.del-box {
    margin-left: 16px;
    width: 510px
}
.del-box .course-name {
    word-break: break-word;
    color: #07111b;
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 22px
}
.del-box .price-btn-box {
    font-size: 14px;
    line-height: 14px
}
.del-box .price-btn-box .truepay-text {
    color: #93999f;
    margin-right: 5px
}
.del-box .price-btn-box .course-little-price {
    color: #f01414
}
.myOrder-number {
    padding: 28px 0 19px;
    font-weight: 700;
    color: #4d555d;
    border-bottom: 1px solid #b7bbbf;
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box
}
.myOrder-number a,.myOrder-number span {
    color: #93999f;
    font-weight: 500;
    margin-left: 24px
}
.myOrder-number a {
    display: none
}
.myOrder-number a:hover {
    color: #4d555d
}
.myOrder-number i.imv2-delete,.myOrder-number i.imv2-receipt {
    float: left;
    margin-top: -2px;
    margin-right: 10px;
    font-size: 16px;
    color: #f01414
}
.myOrder-number i.imv2-delete {
    float: right;
    margin-left: 28px;
    color: #93999f;
    cursor: pointer;
    display: none
}
.myOrder-number i.imv2-delete:hover {
    color: #4d555d
}
.myOrder-course {
    position: relative;
    margin-top: 25px
}
.course-money {
    width: 250px;
    height: 100%;
    text-align: center;
    color: #93999f;
    font-size: 16px;
    box-sizing: border-box;
    line-height: 16px
}
.course-money .wrap {
    display: inline-block
}
.course-money .RMB {
    font-size: 14px;
    vertical-align: top;
    line-height: 14px
}
.course-money .type-box {
    line-height: 14px;
    text-align: left
}
.course-money .type-box .type-price,.course-money .type-box .type-text {
    font-size: 16px;
    color: #93999f
}
.course-money .type-box .type-price .RMB,.course-money .type-box .type-text .RMB {
    font-size: 14px;
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: top;
    line-height: 14px
}
.course-money .type-box .line-though {
    text-decoration: line-through
}
.course-money .type-box .type-text {
    margin-right: 5px
}
.course-money .total-box .type-text {
    font-size: 14px;
    color: #93999f;
    margin-right: 5px
}
.course-money .total-box .type-price {
    color: #f01414
}
.course-money .mb10 {
    margin-bottom: 10px
}
.course-money.presale .type-box {
    line-height: 18px;
    margin-bottom: 4px
}
.course-money.presale .type-box .type-text {
    color: #1c1f21
}
.course-money.presale .type-box .type-price .RMB {
    vertical-align: baseline
}
.course-action {
    position: absolute;
    top: 0;
    width: 180px;
    height: 100%;
    border-left: 1px solid #d9dde1;
    right: 0;
    text-align: center
}
.course-action .pay-now {
    margin: 12px auto;
    display: block;
    width: 120px;
    height: 36px;
    color: #fff;
    background: rgba(240,20,20,.8);
    border-radius: 18px;
    line-height: 36px
}
.course-action .pay-now:hover {
    background-color: #f01414
}
.course-action .order-cancel {
    color: #93999f;
    display: block;
    font-size: 14px;
    line-height: 14px
}
.course-action .order-cancel:hover {
    color: #4d555d
}
.course-action .order-close {
    color: #93999f;
    margin-top: 36px;
    line-height: 14px
}
.course-action.order-recover .order-close {
    margin-top: 22px
}
.course-del {
    width: 740px;
    border-right: 1px solid #d9dde1;
    position: relative
}
</style>

路由，src/router/index.js，代码：

import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
import store from "../store";
// 路由列表
const routes = [
  {
    meta:{
        title: "luffy2.0-站点首页",
        keepAlive: true
    },
    path: '/',         // uri访问地址
    name: "Home",
    component: ()=> import("../views/Home.vue")
  },
  {
    meta:{
        title: "luffy2.0-用户登录",
        keepAlive: true
    },
    path:'/login',      // uri访问地址
    name: "Login",
    component: ()=> import("../views/Login.vue")
  },
  {
      meta:{
        title: "luffy2.0-用户注册",
        keepAlive: true
      },
      path: '/register',
      name: "Register",            // 路由名称
      component: ()=> import("../views/Register.vue"),         // uri绑定的组件页面
  },
  {
    meta:{
        title: "luffy2.0-个人中心",
        keepAlive: true,
        authorization: true,
    },
    path: '/user',
    name: "User",
    component: ()=> import("../views/User.vue"),
    children: [
        {
          meta:{
            title: "luffy2.0-个人信息",
            keepAlive: true,
            authorization: true,
          },
          path: '',
          name: "UserInfo",
          component: ()=> import("../components/user/Info.vue"),
        },
        {
          meta:{
            title: "luffy2.0--我的订单",
            keepAlive: true,
            authorization: true,
          },
          path: 'order',
          name: "UserOrder",
          component: ()=> import("../components/user/Order.vue"),
        },
      ]
  },
  {
    meta:{
        title: "luffy2.0-课程列表",
        keepAlive: true,
    },
    path: '/project',
    name: "Course",
    component: ()=> import("../views/Course.vue"),
  },
  {
    meta:{
        title: "luffy2.0-课程详情",
        keepAlive: true
    },
    path: '/project/:id',     // :id vue的路径参数，代表了课程的ID
    name: "Info",
    component: ()=> import("../views/Info.vue"),
  },
  {
      meta:{
        title: "luffy2.0-购物车",
        keepAlive: true
      },
      path: '/cart',
      name: "Cart",
      component: ()=> import("../views/Cart.vue"),
  },{
      meta:{
        title: "确认下单",
        keepAlive: true
      },
      path: '/order',
      name: "Order",
      component: ()=> import("../views/Order.vue"),
  },
  {
    meta:{
      title: "支付成功",
      keepAlive: true
    },
    path: '/alipay',
    name: "PaySuccess",
    component: ()=> import("../views/AliPaySuccess.vue"),
  },
]
// 路由对象实例化
const router = createRouter({
  // history, 指定路由的模式
  history: createWebHistory(),
  // 路由列表
  routes,
});
// 导航守卫
router.beforeEach((to, from, next)=>{
  document.title=to.meta.title
  // 登录状态验证
  if (to.meta.authorization && !store.getters.getUserInfo) {
    next({"name": "Login"})
  }else{
    next()
  }
})
// 暴露路由对象
export default router