vue尚品汇商城项目-day07【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

我的订单
团购订单

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

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.编码测试与打包发布项目】