vue 前端记录用户访问过的页面，根据排序，获取用户常访问的页面

areyousmoking

已于 2024-04-03 16:50:07 修改

阅读量349

点赞数 5

文章标签： vue.js javascript 前端

于 2024-04-03 10:27:07 首次发布

本文链接：https://blog.csdn.net/areyousmoking/article/details/137333531

版权

在main.js中

// 记录用户访问页面及访问次数
let ToRouter;
// let ToRouter = JSON.parse(sessionStorage.getItem("ToRouter"));
if (JSON.parse(sessionStorage.getItem("ToRouter"))) {
  ToRouter = JSON.parse(sessionStorage.getItem("ToRouter"));
} else {
  ToRouter = [];
}
router.beforeEach((to, from, next) => {
  // console.log(to, from, next);

  if (to.meta.requireAuth === true && !getToken()) {
    next({
      // name: "Login",
    });
  } else {
    const routerData = new Object();
    routerData.router = new Object();
    routerData.router.name = to.name;
    routerData.router.params = to.params;
    routerData.router.query = to.query;
    routerData.title = to.meta.title;
    routerData.name = to.name;
    routerData.num = 0;
    if (ToRouter.length == 0  && routerData.name != "Login") {
      ToRouter.push(routerData);
    } else {
      for (var i = 0; i < ToRouter.length; i++) {
        if (ToRouter[i].title == routerData.title) {
          console.log("如果数组中已经存在这条数据");
          ToRouter[i].num++;
          break;
        }
        if (i == ToRouter.length - 1  && routerData.name != "Login") {
          console.log("不存在这条数据");
          ToRouter.push(routerData);
          break;
        }
      }
    }

    console.log("ToRouter", ToRouter);
//保存到本地
    sessionStorage.setItem("ToRouter", JSON.stringify(ToRouter));
    next();
  }
});

在使用的页面获取数组

  // 拿到存在本地的访问过的页面
    let ToRouter = JSON.parse(sessionStorage.getItem("ToRouter"));
    // 对页面根据点击次数排序
    ToRouter.sort((a, b) => {
      return b.num - a.num;
    });
    console.log("home======ToRouter", ToRouter);
    // 截取常用的前十个页面
    this.ToRouter = ToRouter.splice(0, 10);