vue路由拦截案例

import Vue from "vue";

import Router from "vue-router";

// 功能页面

import Authorize from "@/views/login/Authorize";

import Transition from "@/views/login/Transition";

// 登录

import Login from "@/views/login/Index";

// 首页

import Home from "@/views/home/Index";

// 活动

import Activity from "@/views/activity/ActivityList";

// 我的

import Mine from "@/views/mine/Index";

Vue.use(Router);

const routes = [

  {

    path: "/login",

    name: "Login",

    component: Login,

    meta: { menu: false }

  },

  {

    path: "/authorize",

    name: "Authorize",

    component: Authorize,

    meta: { menu: false }

  },

  {  

    path: "/transition",

    name: "Transition",

    component: Transition,

    meta: { menu: false }

  },

  {

    path: "/",

    name: "Home",

    component: Home,

    meta: { menu: true }

  },

  {

    path: "/home",

    name: "Home",

    component: Home,

    meta: { menu: true }

  },

  {

    path: "/home/brandDetail/:id",

    name: "BrandDetail",

    component: BrandDetail,

    meta: { menu: false }

  },

  {

    path: "/activity",

    name: "Activity",

    component: Activity,

    meta: { menu: true }

  },

  {

    path: "/activity/detail/:activityId",

    name: "ActivityDetail",

    component: ActivityDetail,

    meta: { menu: false }

  },

  {

    path: "/mine",

    name: "Mine",

    component: Mine,

    meta: { menu: true }

  },

  {

    path: "/mine/detail/:id",

    name: "NewsDetail",

    component: NewsDetail,

    meta: { menu: false }

  },

];

const router = new Router({

  mode: "history",

  base: '/web/',

  routes

});

// 通过守卫拦截黑名单跳转到授权页

router.beforeEach((to, from, next) => {

  // 首次进入页面

  if (from.path === '/' && from.matched && from.matched.length === 0) {

    sessionStorage.setItem('FIRST_ENTER_URL', window.location.href)

  }

  const whiteList = to.path === "/login" ||

                    to.path === "/home" ||

                    to.path === "/activity" ||

                    to.path === "/authorize" ||

                    to.path === "/transition" ||

  if (whiteList) {

    next();

  } else {

    // 用户访问认证后页面时获取用户是否授权

    const authorer = sessionStorage.getItem('AUTHORER');

    if (authorer === 'false') {

      sessionStorage.setItem('ROUTE_PATH', to.path)

      router.push('/authorize');

    } else {

      next();

    }

  }

});

export default router;