防止访问重复页面时报错与路由守卫

必须写在路由下边:

//防止访问重复页面时报错
// 获取原型对象push函数
const originalPush = VueRouter.prototype.push;
// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

const router = new VueRouter({
  routes,
});

//路由守卫
router.beforeEach(function (to, from, next) {
  // 默认访问到登录页
  if (to.path === "/login") {
    next(); //登陆页面直接放行
  } else {
    let token = local.get("token");
    // console.log("token111111111111", token);
    if (token) {
      if (to.meta.role.includes(local.get("role"))) {
        next();
      } else {
        next("/login");
      }
    } else {
      Message.error("警察叔叔还有三秒到达战场,请稍后...");
      next({ path: "/login" });
    }
  }
});

例如:

import Vue from "vue";
import VueRouter from "vue-router";
import { Message } from "element-ui";
import local from "@/utils/local.js";

Vue.use(VueRouter);

// 路由配置
const routes = [
  //访问时自动跳登陆页
  { path: "/", redirect: "/login" },

  //登陆页
  {
    path: "/login",
    component: () => import("@/views/login/LoginView.vue"),
    mete: { role: ["super"] },
  },

  // 首页
  {
    path: "/index",
    component: () => import("../views/index/LayOut.vue"),
    meta: { role: ["super", "normal"], title: "后台首页" },
    // isMenu: true, //声明要做导航的路由
    icon: "el-icon-s-home",
    children: [
      {
        path: "",
        component: () => import("@/views/index/IndexView.vue"),
        meta: { role: ["super", "normal"] },
      },
    ],
  },

  //商品管理
  {
    path: "/goods",
    component: () => import("@/views/index/LayOut.vue"),
    meta: { role: ["super", "normal"], title: "商品管理" },
    // isMenu: true, //声明要做导航的路由
    icon: "el-icon-s-goods",
    redirect: "/goods/list",
    children: [
      {
        path: "/goods/list",
        component: () => import("@/views/goods/GoodsList.vue"),
        meta: { role: ["super", "normal"], title: "商品列表" },
        // isMenu: true,
      },
      {
        path: "/goods/add",
        component: () => import("@/views/goods/GoodsAdd.vue"),
        meta: { role: ["super", "normal"], title: "添加商品" },
        // isMenu: true,
      },
      {
        path: "/goods/category",
        component: () => import("@/views/goods/GoodsCategory.vue"),
        meta: { role: ["super", "normal"], title: "商品分类" },
        // isMenu: true,
      },
      {
        path: "/goods/edit",
        component: () => import("@/views/goods/GoodsEdit.vue"),
        meta: { role: ["super", "normal"], title: "修改商品" },
      },
    ],
  },

  //订单管理
  {
    path: "/order",
    component: () => import("../views/index/LayOut.vue"),
    meta: { role: ["super", "normal"], title: "订单管理" },
    // isMenu: true, //声明要做导航的路由
    icon: "el-icon-s-order",
    children: [
      {
        path: "",
        component: () => import("@/views/order/OrderView.vue"),
        meta: { role: ["super", "normal"] },
      },
    ],
  },

  //店铺管理
  {
    path: "/shop",
    component: () => import("../views/index/LayOut.vue"),
    meta: { role: ["super"], title: "店铺管理" },
    // isMenu: true,
    icon: "el-icon-s-shop",
    children: [
      {
        path: "",
        component: () => import("@/views/shop/ShopView.vue"),
        meta: { role: ["super"] },
      },
    ],
  },

  //账号管理
  {
    path: "/account",
    component: () => import("../views/index/LayOut.vue"),
    meta: { role: ["super"], title: "账号管理" },
    // isMenu: true, //声明要做导航的路由
    redirect: "/account/list",
    icon: "el-icon-user-solid",
    children: [
      {
        path: "/account/list",
        component: () => import("@/views/account/AccountList.vue"),
        meta: { role: ["super"], title: "账号列表" },
        // isMenu: true,
      },
      {
        path: "/account/add",
        component: () => import("@/views/account/AccountAdd.vue"),
        meta: { role: ["super"], title: "添加账号" },
        // isMenu: true,
      },
      {
        path: "/account/changepassword",
        component: () => import("@/views/account/ChangePassword.vue"),
        meta: { role: ["super"], title: "修改密码" },
        // isMenu: true,
      },
      {
        path: "/account/personal",
        component: () => import("@/views/account/PersonalView.vue"),
        meta: { role: ["super"], title: "管理员信息" },
        // isMenu: true,
      },
    ],
  },

  //销售统计
  {
    path: "/count",
    component: () => import("../views/index/LayOut.vue"),
    meta: { role: ["super"], title: "销售统计" },
    // isMenu: true,
    icon: "el-icon-pie-chart",
    redirect: "/count/goods",
    children: [
      {
        path: "/count/goods",
        component: () => import("@/views/count/CountGoods.vue"),
        meta: { role: ["super"], title: "销售统计" },
        // isMenu: true,
      },
      {
        path: "/count/order",
        component: () => import("@/views/count/CountOrder.vue"),
        meta: { role: ["super"], title: "订单统计" },
        // isMenu: true,
      },
    ],
  },
];

//防止访问重复页面时报错
// 获取原型对象push函数
const originalPush = VueRouter.prototype.push;
// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

const router = new VueRouter({
  routes,
});

//路由守卫
router.beforeEach(function (to, from, next) {
  // 默认访问到登录页
  if (to.path === "/login") {
    next(); //登陆页面直接放行
  } else {
    let token = local.get("token");
    // console.log("token111111111111", token);
    if (token) {
      if (to.meta.role.includes(local.get("role"))) {
        next();
      } else {
        next("/login");
      }
    } else {
      Message.error("警察叔叔还有三秒到达战场,请稍后...");
      next({ path: "/login" });
    }
  }
});

export default router;