文章目录
- 44.个人中心二级路由搭建
- 45.我的订单
- 46.优化登录跳转
- 47.独享守卫
- 本人其他相关文章链接
44.个人中心二级路由搭建
修改代码：
将Center拆分为2个组件MyOrder+GroupOrder
src/router/routes.js
import Center from '@/pages/Center'
import GroupOrder from '@/pages/Center/GroupOrder'
import MyOrder from '@/pages/Center/MyOrder'
{
name: 'center',
path: '/center',
component: Center,
meta:{"isShow": true}, //自定义元数据属性，判断Footer组件在底部是否显示
children: [ //通过children配置子级路由
{
path: 'myOrder',
component: MyOrder,
},
{
path: 'groupOrder',
component: GroupOrder,
},
{
path: '',
redirect: 'myorder'
}
]
},
src/pages/Center/index.vue
<router-link to="/center/myOrder">我的订单</router-link>
<router-link to="/center/groupOrder">团购订单</router-link>
<router-view></router-view>
45.我的订单
修改代码：
src/api/index.js
//获取个人中心的数据
//api/order/auth/{page}/{limit} get
export const reqMyOrderList = (page,limit)=>requests({url:`/order/auth/${page}/${limit}`,method:'get'});
src/pages/Center/MyOrder/index.vue
<template>
<div class="order-right">
<div class="order-content">
<div class="title">
<h3>我的订单</h3>
</div>
<div class="chosetype">
<table>
<thead>
<tr>
<th width="29%">商品</th>
<th width="31%">订单详情</th>
<th width="13%">收货人</th>
<th>金额</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
<div class="orders">
<!-- 每一笔订单 -->
<table
class="order-item"
v-for="(order, index) in myOrder.records"
:key="order.id"
>
<thead>
<tr>
<th colspan="5">
<span class="ordertitle"
>{{ order.createTime }} 订单编号：{{ order.outTradeNo }}
<span class="pull-right delete"
><img src="../images/delete.png"
/></span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(cart, index) in order.orderDetailList" :key="cart.id">
<td width="60%">
<div class="typographic">
<img :src="cart.imgUrl" style="width:100px;height:100px" />
<a href="#" class="block-text">{{ cart.skuName }}</a>
<span>x{{ cart.skuNum }}</span>
<a href="#" class="service">售后申请</a>
</div>
</td>
<td
:rowspan="order.orderDetailList.length"
v-if="index == 0"
width="8%"
class="center"
>
{{ order.consignee }}
</td>
<td
:rowspan="order.orderDetailList.length"
v-if="index == 0"
width="13%"
class="center"
>
<ul class="unstyled">
<li>总金额¥{{ order.totalAmount }}.00</li>
<li>在线支付</li>
</ul>
</td>
<td
:rowspan="order.orderDetailList.length"
v-if="index == 0"
width="8%"
class="center"
>
<a href="#" class="btn">{{ order.orderStatusName }}</a>
</td>
<td
:rowspan="order.orderDetailList.length"
v-if="index == 0"
width="13%"
class="center"
>
<ul class="unstyled">
<li>
<a href="mycomment.html" target="_blank">评价|晒单</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div class="choose-order">
<!-- 分页器 -->
<Pagination
:pageNo="page"
:pageSize="limit"
:total="myOrder.total"
:continues="5"
@getPageNo="getPageNo"
/>
</div>
</div>
<!--猜你喜欢-->
<div class="like">
<h4 class="kt">猜你喜欢</h4>
<ul class="like-list">
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike01.png" />
</div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
</div>
<div class="price">
<em>¥</em>
<i>3699.00</i>
</div>
<div class="commit">已有6人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike02.png" />
</div>
<div class="attr">
Apple苹果iPhone 6s/6s Plus 16G 64G 128G
</div>
<div class="price">
<em>¥</em>
<i>4388.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike03.png" />
</div>
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
<div class="price">
<em>¥</em>
<i>4088.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike04.png" />
</div>
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
<div class="price">
<em>¥</em>
<i>4088.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "MyOrder",
data() {
return {
//初始化参数
//当前第几页
page: 1,
//每一页展示数据个数
limit: 3,
//存储我的订单的数据
myOrder: {},
};
},
mounted() {
//获取我的订单的数据方法
this.getData();
},
methods: {
//获取我的订单的方法
async getData() {
//解构出参数
const { page, limit } = this;
let result = await this.$API.reqMyOrderList(page, limit);
console.log("******获取个人中心的数据result:{}", result)
if (result.code == 200) {
this.myOrder = result.data;
}
},
//获取当前点击那一页
getPageNo(page){
//修改组件响应式数据page
this.page = page;
this.getData();
}
},
};
</script>
<style scoped></style>
46.优化登录跳转
优化点：之前是登录后默认都是跳转的/home首页，现在有个需求：用户未登录情况下点击跳转订单页 -> 先跳转到登录页 -> 当登陆成功后应该跳转到订单页而不是首页
方案：
src/router/index.js
else{
//未登录：不能去交易相关、不能去支付相关【pay|paysuccess】、不能去个人中心
//未登录去上面这些路由-----登录
let toPath = to.path;
if(toPath.indexOf('/trade')!=-1 || toPath.indexOf('/pay')!=-1||toPath.indexOf('/center')!=-1){
//把未登录的时候向去而没有去成的信息，存储于地址栏中【路由】
next('/login?redirect='+toPath);
}else{
//去的不是上面这些路由（home|search|shopCart）---放行
next();
}
}
src/pages/Login/index.vue
原来的代码：
this.$router.push("/home");
------------------------------------------------------------------------------------------------------------------------
优化后的代码：
//判断query是否有参数，有就登录后重定向
let goPath = this.$route.query.redirect||'/home';
//跳转到首页
this.$router.push(goPath);
47.独享守卫
优化点：知识点46是针对未登录情况下的错误跳转，知识点47是针对已登录情况下，假设用户刚登录成功，能直接跳转支付成功页面或者订单页面吗？答案是不能。
方案：
src/router/routes.js
{
name: 'trade',
path: '/trade',
component: Trade,
meta:{"isShow": true}, //自定义元数据属性，判断Footer组件在底部是否显示
//路由独享守卫
beforeEnter: (to, from, next) => {
//去交易页面，必须是从购物车而来
if (from.path == "shopCart") {
next();
} else {
next(false);
}
}
},
{
name: 'paySuccess',
path: '/paySuccess',
component: PaySuccess,
meta:{"isShow": true}, //自定义元数据属性，判断Footer组件在底部是否显示
//路由独享守卫
beforeEnter: (to, from, next) => {
//去交易页面，必须是从购物车而来
if (from.path == "pay") {
next();
} else {
next(false);
}
}
},
本人其他相关文章链接
1.vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
![[Latex]特殊符号和花式字体](https://img-blog.csdnimg.cn/ffa24cb5f5c741958cd6117c80bbd53e.png)
