目录

一、总体思路

二、具体流程

1、在src下面新建一个目录utils文件夹

2、在utils文件夹下新建一个index.js文件

3、main.js挂载到vue实例中

三、如何使用

vue项目工程中，有很多公用的js函数，为了便于集中管理，可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。

一、总体思路

src下面新建一个utils文件夹，里面存在所有的函数js文件，utils文件夹下面在建一个index.js文件，可以将所有的函数js文件注册到这个index.js里面，方便统一管理调用。最后将这个index.js在main.js里面注册到vue实例中

二、具体流程

1、在src下面新建一个目录utils文件夹

2、在utils文件夹下新建一个index.js文件

index.js里面的内容：

import test1 from "./test1";  //引入单个函数方法
import test2 from "./test2";   //引入单个函数方法
import * as test3 from "./test3";  //引入多个函数方法
import classtest from "./classtest";   //引入class类
export default {
    test1:test1,
    test2:test2,
    test3:test3,
    classtest:classtest,
}

其中test1.js文件写法：

function test1(){
    alert("123");
}
export default test1;

test3.js文件写法：

export function test3(){
    alert("test3");
}
export function test4(){
    alert("test4");
}

classtest.js文件写法：

class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    todoSome(){
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

3、main.js挂载到vue实例中

//main.js文件中
import myutils from './utils/index';   //引入文件

Vue.prototype.$myutils=myutils;   //挂载实例属性，所有的往vue实例的prototype属性中挂载，这样挂 载后就可以使用this.来调用了。

三、如何使用

如何使用单个方法、多个方法、class类的js调用方法不一样：

this.$myutils.test1();  //调用单个方法
this.$myutils.test2();
this.$myutils.test3.test4();  //调用多个方法中的某个方法
var test= new this.$myutils.classtest('haha','33');   //调用类js，先new，注意根据constrator传参
test.todoSome();    //调用class类下面的方法

在backtrader源代码的文件夹utils中主要分为7个文件，

• _initi_.py
• py3.py
• autodict.py
• date.py
• dateintern.py
• flushfile.py
• ordereddefaultdict.py

_init_.py的作用

这个文件主要用于python包和模块，方便在包和模块之间进行import

###############################################################################
from __future__ import (absolute_import, division, print_function,
                        unicode_literals)

from collections import OrderedDict
import 

Components文件夹

Carousel

<template>
   <div class="swiper-container" id="floor1Swiper">
                <div class="swiper-wrapper">
                    <div  class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id" >
                        <img :src="carousel.imgUrl" />
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
</template>

<script>
import Swiper from "swiper";
export default {
name:"Carousel",
  props: ["list"],
  watch: {
    list: {
      immediate: true,
      //为什么watch监听不到list，list是父组件给的，给的时候是一个对象，对象中该有的都有(所以加上immediate，一开始就建东)
      handler() {
        //只是v-for动态渲染结构我们是没办法确定的，还是要用到nextTick
        this.$nextTick(() => {
          //不是在自己的组件发请求的，数据是父组件给的，而且结构已经有了，上一个是在自己内部发送请求的
          var mySwiper = new Swiper(".swiper-container", {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也可以切换图片
              clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },

}
</script>


<style>


</style>

Footer

<template>
  <!-- 底部 -->
  <div class="footer">
    <div class="footer-container">
      <div class="footerList">
        <div class="footerItem">
          <h4>购物指南</h4>
          <ul class="footerItemCon">
            <li>购物流程</li>
            <li>会员介绍</li>
            <li>生活旅行/团购</li>
            <li>常见问题</li>
            <li>购物指南</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>配送方式</h4>
          <ul class="footerItemCon">
            <li>上门自提</li>
            <li>211限时达</li>
            <li>配送服务查询</li>
            <li>配送费收取标准</li>
            <li>海外配送</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>支付方式</h4>
          <ul class="footerItemCon">
            <li>货到付款</li>
            <li>在线支付</li>
            <li>分期付款</li>
            <li>邮局汇款</li>
            <li>公司转账</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>售后服务</h4>
          <ul class="footerItemCon">
            <li>售后政策</li>
            <li>价格保护</li>
            <li>退款说明</li>
            <li>返修/退换货</li>
            <li>取消订单</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>特色服务</h4>
          <ul class="footerItemCon">
            <li>夺宝岛</li>
            <li>DIY装机</li>
            <li>延保服务</li>
            <li>尚品汇E卡</li>
            <li>尚品汇通信</li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>帮助中心</h4>
         <img src="./images/wx_cz.jpg" alt="">
        </div>
      </div>
      <div class="copyright">
        <ul class="helpLink">
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            联系我们
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            商家入驻
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>关于我们</li>
        </ul>
        <p>地址：北京市昌平区宏福科技园综合楼6层</p>
        <p>京ICP备19006430号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style lang="less" scoped>
  .footer {
        background-color: #eaeaea;

        .footer-container {
            width: 1200px;
            margin: 0 auto;
            padding: 0 15px;

            .footerList {
                padding: 20px;
                border-bottom: 1px solid #e4e1e1;
                border-top: 1px solid #e4e1e1;
                overflow: hidden;
                padding-left: 40px;

                .footerItem {
                    width: 16.6666667%;
                    float: left;

                    h4 {
                        font-size: 14px;
                    }

                    .footerItemCon {
                        li {
                            line-height: 18px;
                        }
                    }

                    &:last-child img {
                        width: 121px;
                    }
                }
            }

            .copyright {
                padding: 20px;

                .helpLink {
                    text-align: center;

                    li {
                        display: inline;

                        .space {
                            border-left: 1px solid #666;
                            width: 1px;
                            height: 13px;
                            background: #666;
                            margin: 8px 10px;
                        }
                    }
                }

                p {
                    margin: 10px 0;
                    text-align: center;
                }
            }
        }
    }
</style>

Header

<template>
  <header class="header">
    <!-- 头部的第一行 -->
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！</p>
          <p v-if="!userName">
            <span>请</span>
            <!-- <a href="###">登录</a> -->
            <!-- 编程式导航，务必有to属性 -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>
          </p>
          <p v-else>
            <a href="">{{ userName }}</a>
            <a class="register" @click="logout">退出登录</a>
          </p>
        </div>
        <div class="typeList">
          <!-- <a href="###">我的订单</a> -->
          <!-- <a href="###">我的购物车</a> -->
          <router-link to="/center">我的订单</router-link>
          <router-link to="/shopcart">我的购物车</router-link>
          <a href="###">我的尚品汇</a>
          <a href="###">尚品汇会员</a>
          <a href="###">企业采购</a>
          <a href="###">关注尚品汇</a>
          <a href="###">合作招商</a>
          <a href="###">商家后台</a>
        </div>
      </div>
    </div>
    <!--头部第二行 搜索区域-->
    <div class="bottom">
      <h1 class="logoArea">
        <router-link class="logo" to="/home">
          <img src="./images/logo.png" alt="" />
        </router-link>
      </h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
            v-model="keyword"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      keyword: "",
    };
  },
  mounted() {
    //通过全局事件总线，清空关键字
    this.$bus.$on("isclear", () => {
      this.keyword = "";
    });
  },
  methods: {
    //搜索这个按钮回调函数，进行路由跳转
    goSearch() {
      /*路由传参:
      1.字符串形式（需要占位，点击完之后，可以查看网址上确实携带了信息）
       this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());*/
      /* 2.模板字符串
      this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);*/
      //3.对象写法

      // this.$router.push({
      //   name: "search",
      //   params: { keyword: this.keyword },
      //   query: { k: this.keyword.toUpperCase() },
      // });
      let location = {
        name: "search",
        params: { keyword: this.keyword },
        query: { k: this.keyword.toUpperCase() },
      };
      //给location加上query参数
      if (this.$route.query) {
        location.query = this.$route.query;
      }

      this.$router.push(location);
    },
    async logout() {
      try {
        await this.$store.dispatch("userLogout");
        //回到首页
        this.$router.push("/home");
      } catch (error) {
        alert(error.message);
      }
    },
  },
  computed: {
    userName() {
      return this.$store.state.user.userInfo.loginName;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  & > .top {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .loginList {
        float: left;

        p {
          float: left;
          margin-right: 10px;

          .register {
            border-left: 1px solid #b3aeae;
            padding: 0 5px;
            margin-left: 5px;
          }
        }
      }

      .typeList {
        float: right;

        a {
          padding: 0 10px;

          & + a {
            border-left: 1px solid #b3aeae;
          }
        }
      }
    }
  }

  & > .bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .logoArea {
      float: left;

      .logo {
        img {
          width: 175px;
          margin: 25px 45px;
        }
      }
    }

    .searchArea {
      float: right;
      margin-top: 35px;

      .searchForm {
        overflow: hidden;

        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0px 4px;
          border: 2px solid #ea4a36;
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 32px;
          width: 68px;
          background-color: #ea4a36;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
</style>

Pagination

<template>
  <div class="pagination">
    <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
    <button v-if="startNumAndendNum.start>1"  @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
    <button v-if="startNumAndendNum.start>2">···</button>

    <button v-for="(page,index) in startNumAndendNum.end" :key="index" v-if="page>=startNumAndendNum.start"  @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</button>
  

    <button v-if="startNumAndendNum.end<totalPage-1" >···</button>
    <button v-if="startNumAndendNum.end<totalPage"  @click="$emit('getPageNo',totalPage)"  :class="{active:pageNo==totalPage}">{{ totalPage }}</button>
    <button :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>

    <button style="margin-left: 30px">共 {{ total }}条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    totalPage() {
      //向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    //计算出连续的页面的其实数字与结束数字【连续页码的数字：至少是5】
    startNumAndendNum() {
      const {totalPage , continues} = this; //后面用到这个地方的时候就不用写this了
      let start = 0,
        end = 0;
      //1.不正常的情况
      if (totalPage < continues) {
        start = 1;
        end = totalPage;
      }
      //2.正常的情况
      else {
        start = this.pageNo - parseInt(continues / 2);
        end = this.pageNo + parseInt(continues / 2);
        if (start <= 0) {
          //2.1左边越界start从1开始
          start = 1;
          end = continues;
        }
        if (end > totalPage) {
          //2.2右边越界
          end = totalPage;
          start = totalPage - continues + 1;
        }
      }

      return { start, end };
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }

}
</style>

TypeNav

<template>
  <!-- 商品分类导航 -->
  <div class="type-nav">
    <div class="container">
      <div @mouseleave="leaveIndex" @mouseenter="changeShow">
        <h2 class="all">全部商品分类</h2>

        <transition name="sort">
          <div class="sort" v-show="show">
            <div class="all-sort-list2" @click="goSearch">
              <div
                class="item"
                v-for="(c1, index) in categoryList"
                :key="c1.categoryId"
              >
                <h3
                  @mouseenter="changeIndex(index)"
                  :class="{ cur: currentIndex === index }"
                >
                  <a
                    :data-categoryName="c1.categoryName"
                    :data-category1id="c1.categoryId"
                    >{{ c1.categoryName }}--{{ index }}</a
                  >
                </h3>
                <!-- 二三级分类 -->
                <div
                  class="item-list"
                  clearfix
                  :style="{
                    display: currentIndex === index ? 'block' : 'none',
                  }"
                >
                  <div
                    class="subitem"
                    v-for="(c2, index) in c1.categoryChild"
                    :key="c2.categoryId"
                  >
                    <dl class="fore">
                      <dt>
                        <a
                          :data-categoryName="c2.categoryName"
                          :data-category2id="c2.categoryId"
                          >{{ c2.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <em
                          v-for="(c3, index) in c2.categoryChild"
                          :key="c3.categoryId"
                        >
                          <a
                            :data-categoryName="c3.categoryName"
                            :data-category3id="c3.categoryId"
                            >{{ c3.categoryName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
//把lodash全部功能函数引入
// import _ from "lodash";
// console.log(_);

//按需引入
import throttle from "lodash/throttle";
export default {
  name: "TypeNav",
  data() {
    return {
      // -1代表哪一个h3都没有hover
      currentIndex: "-1",
      show: true, //代表在search组件里是否展示
    };
  },

  // 组件挂载完毕,获取数据，存储于仓库中
  mounted() {
    if (this.$route.path != "/home") {
      this.show = false;
    }
  },
  methods: {
    /*   changeIndex(index){
       console.log(index);
      this.currentIndex=index;
    },*/

    //使用es5语法 Key:value 的形式,es6没办法写这种形式
    changeIndex: throttle(function (index) {
      //  console.log(index);
      this.currentIndex = index;
    }, 50),

    leaveIndex() {
      this.currentIndex = -1;
      if (this.$route.path != "/home") {
        this.show = false;
      }
    },
    goSearch(event) {
      //最好的解决方式:编程式路由导航+事件委派
      /*存在一些问题：
              事件委派是将全部的子节点（h3 dt dl em）的事件委派给父节点
              点击节点的时候，如何判断是a标签（把子节点当做a标签，加上自定义属性data-categoryName,其余的子节点是没有的）
              判断a标签之后，如何区别一级，二级，三级分类的标签


获取到当前触发这个事件的结点（h3 dt dl em），带有data-categoryName这样的结点一定是a结点(event)
结点有一个属性dataset，可以获取结点的自定义属性与属性值

*/
      // console.log(event.target.dataset);

      let { categoryname, category1id, category2id, category3id } =
        event.target.dataset;
      if (categoryname) {
        //如果身上拥有categoryname一定是a标签
        let location = { name: "search" };
        let query = { categoryName: categoryname };
        if (category1id) {
          query.category1id = category1id;
        } else if (category2id) {
          query.category2id = category2id;
        } else {
          query.category3id = category3id;
        }
        if (this.$route.params) {
          location.params = this.$route.params;
        }
        //把两个参数合并到一起
        location.query = query;
        this.$router.push(location);
      }
    },
    changeShow() {
      if (this.$route.path != "/home") {
        //其实进入的时候写不写都行
        this.show = true;
      }
    },
  },
  computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      //注入一个参数state，其实就是大仓库中的数据
      categoryList: (state) => {
        // console.log(state);
        return state.home.categoryList;
      },
    }),
  },
};
</script>

<style scoped lang="less">
.type-nav {
  border-bottom: 2px solid #e1251b;

  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;

    .all {
      width: 210px;
      height: 45px;
      background-color: #e1251b;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }

    .nav {
      a {
        height: 45px;
        margin: 0 22px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
      }
    }

    .sort {
      position: absolute;
      left: 0;
      top: 45px;
      width: 210px;
      height: 461px;
      position: absolute;
      background: #fafafa;
      z-index: 999;

      .all-sort-list2 {
        .item {
          h3 {
            line-height: 30px;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            padding: 0 20px;
            margin: 0;

            a {
              color: #333;
            }
          }

          .item-list {
            // display: none;
            position: absolute;
            width: 734px;
            min-height: 460px;
            background: #f7f7f7;
            left: 210px;
            border: 1px solid #ddd;
            top: 0;
            z-index: 9999 !important;

            .subitem {
              float: left;
              width: 650px;
              padding: 0 4px 0 8px;

              dl {
                border-top: 1px solid #eee;
                padding: 6px 0;
                overflow: hidden;
                zoom: 1;

                &.fore {
                  border-top: 0;
                }

                dt {
                  float: left;
                  width: 54px;
                  line-height: 22px;
                  text-align: right;
                  padding: 3px 6px 0 0;
                  font-weight: 700;
                }

                dd {
                  float: left;
                  width: 415px;
                  padding: 3px 0 0;
                  overflow: hidden;

                  em {
                    float: left;
                    height: 14px;
                    line-height: 14px;
                    padding: 0 8px;
                    margin-top: 5px;
                    border-left: 1px solid #ccc;
                  }
                }
              }
            }
          }

          &:hover {
            .item-list {
              // display: block;
            }
          }
        }
        // .item:hover {
        //   background-color: skyblue;
        // }
        .cur {
          background-color: skyblue;
        }
      }
    }
    .sort-enter {
      height: 0px;
    }
    .sort-enter-to {
      height: 461px;
    }
    .sort-enter-active {
      transition: all 0.5s linear;
    }
  }
}
</style>

Plugin文件夹

myPlugins.js

//也封装一个类似的插件，使小写变成大写
let myPlugins={};
myPlugins.install=function(Vue,options){
    //只要Vue.use这个插件了，里面的内容就会被自动调用
    // console.log('调用');
    //全局指令
    Vue.directive(options.name,(element,params)=>{
        element.innnerHTML=params.value.toUpperCase();
        // console.log(params);
    })
}
export default myPlugins

validate.js

// validate插件：表单验证区域
import Vue from "vue"
import VeeValidate from "vee-validate"
// 引入中文 提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate);

//表单验证
VeeValidate.Validator.localize('zh_CN', {
    messages: {
        ...zh_CN.messages,//使用中文
        is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
    },
    attributes: { // 给校验的 field 属性名映射中文名称
        phone: '手机号',
        code: '验证码',
        password: '密码',
        password1: '确认密码',
        isCheck: '协议',
        ageree:"协议",
    }
})

//自定义校验规则（叫agree）
//定义协议必须打勾同意
VeeValidate.Validator.extend('tongyi', {
    validate: value => {
        return value
    },
    getMessage: field => field + '必须同意'
})

utils文件夹

token.js

export const setToken=(token)=>{
    localStorage.setItem("TOKEN",token)
}
//需要返回数据
export const getToken=()=>{
    return localStorage.getItem("TOKEN")
}
//不需要返回数据
export const removeToken=()=>{
     localStorage.removeItem("TOKEN")
}

uuid_token.js

import { v4 as uuidV4 } from "uuid"
//要生成一个随机字符串，且每次执行不能发生变化，游客身份持久存储
export const getUUID = () => {
    //先从本地存储获取uuid,(看一下本地存储里面是否有)
    let uuid_token = localStorage.getItem("UUIDTOKEN");
    //如果没有
    if (!uuid_token) {
        //我生成游客临时身份
        uuid_token = uuidV4();
        //本地存储储存一次
        localStorage.setItem("UUIDTOKEN", uuid_token);
    }
    //一定要有返回值，没有返回值undefined
    return uuid_token;
}

router文件夹

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)

import routes from "./routes"
import store from "@/store"
//先把VueRouter原型对象的push，先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
//第一个参数:告诉原来的push方法，你往哪里跳转(传递那些参数)
/* call和apply区别
相同:都可以调用函数一次，都可以篡改函数的上下文一次
不同:call和apply传递参数，call传递参数用逗号隔开，apply方法执行，传递数组
*/
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        //不使用call方法，this就是window,就不是push原来的上下文了
        originPush.call(this, location, resolve, reject)
    }
    else {
        originPush.call(this, location, () => { }, () => { })
    }

}

VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        //不使用call方法，this就是window,就不是push原来的上下文了
        originReplace.call(this, location, resolve, reject)
    }
    else {
        originReplace.call(this, location, () => { }, () => { })
    }

}

//配置路由
let router = new VueRouter({
    //配置路由
    //routes:routes,//kv一致省略v
    routes,

    scrollBehavior(to, from, savedPosition) {
        // 始终滚动到顶部
        return { y: 0 }
    },
})
// 全局前置守卫
router.beforeEach(async (to, from, next) => {
    //to:要跳转的路由信息是什么
    //from 可以获取到从哪个路由来的信息
    //next 放行函数
    next()
    //只有登录了token才是存在的
    let token = store.state.user.token;
    let name = store.state.user.userInfo.name;
    if (token) {
        if (to.path == "/login") {
            // console.log("22");
            next("/home")

        } else {
            /*登录了，但是去的不是login
            但是放行之前，我们要确保userInfo存在
            */
            if (name) {
                next();
            } else {
                //如果没有名字
                try {
                    await store.dispatch("getUserInfo");
                    next()
                } catch (error) {
                    //token过期了获取不到用于的信息，从新登录
                    //清除token 
                    await store.dispatch("userLogout")
                    // console.log("111");
                    next("/login");

                }
            }

        }
    } else {
        //未登录的时候访问个人信息，是不允许的
        // next()
        let toPath = to.path;    
        // console.log(toPath);
        if (toPath.indexOf("/center") != -1 || toPath.indexOf("/trade") != -1 || toPath.indexOf("/pay") != -1|| toPath.indexOf("/shopcart") != -1) {
            // 把未登录的时候 想去但是没去成的信息存储在地址栏中（路由）
            // console.log("/login？redirect="+toPath);
            next('/login?redirect='+toPath)
        }
        else {
    //未登录的时候访问其他是可以通行的
            next();
        }
    }
    // console.log(store);
})

export default router;

routes.js

//引入路由组件
// import Home from "@/pages/Home"
import Search from "@/pages/Search"
import Login from "@/pages/Login"
import Register from "@/pages/Register"
// import Detail from "@/pages/Detail"
import AddCartSuccess from "@/pages/AddCartSuccess"
import ShopCart from "@/pages/ShopCart"
import Trade from "@/pages/Trade"
import Pay from "@/pages/Pay"
import PaySuccess from "@/pages/PaySuccess"
import Center from "@/pages/Center"
//引入二级路由组件
import myOrder from "@/pages/Center/myOrder"
import groupOrder from "@/pages/Center/groupOrder"

// const Foo = () => import('./Foo.vue')
const Foo = () =>{
    console.log("我是Detail组件")
    return import("@/pages/Detail")
}
/*
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，
然后当路由被访问的时候!!!才加载对应组件，这样就更加高效了。 */
//路由的配置信息
export default [

    {
        path: "/home",
        component:  () => import('@/pages/Home'),
        //当用户访问的时候才会执行
        meta: { show: true }
    },
    {
        path: "/search/:keyword?",//不写的话，路径中就没有关键字了
        // component: Foo,
        component: Search ,
        meta: { show: true },
        name: "search",

    },
    {
        path: "/login",
        component: Login,
        meta: { show: false }
    },
    {
        path: "/register",
        component: Register,
        meta: { show: false }
    },
    {
        //重定向:在项目跑起来的时候，立马定位到首页
        path: '*',
        redirect: "/home"
    },
    {
        path: "/detail/:id",
        component: Foo,
        name: "detail",
        meta: { show: false }
    },
    {
        path: "/addcartsuccess",
        name: "addcartsuccess",
        component: AddCartSuccess,
        meta: { show: true }
    },
    {
        path: "/shopcart",
        component: ShopCart,
        name: "shopcart",
        meta: { show: true }
    },
    {
        path: "/trade",
        component: Trade,
        name: "trade",
        beforeEnter: (to, from, next) => {
            //   console.log(from);
            if (from.path == "/shopcart") {
                next();
            } else {
                next(false);
            }
        }

    },
    {
        path: "/pay",
        component: Pay,
        name: "pay",
        beforeEnter: (to, from, next)=>{
            if (from.path == "/trade") {
                next()
            }
            else {
                next(false);
            }
        }

    },
    {
        path: "/paysuccess",
        component: PaySuccess,
        name: "paysuccess",

    },
    {
        path: "/center",
        component: Center,
        name: "center",
        //二级路由组件
        children: [
            {
                path: "myorder",
                component: myOrder,
            },
            {
                path: "grouporder",
                component: groupOrder,

            },
            {
                //重定向，默认界面在我的订单这
                path: "/center",
                redirect: "/center/myorder"
            }
        ],
    },

]