vue2.x 使用前端的方式 浏览器返回登录页后不让跳过登录进入其他页面

如标题所示：
使用单纯前端方式来验证返回登录页后，不能使用浏览器前进的方式绕过登录页。

如果项目未使用vue-router需要先添加插件：
npm install vue-router@版本号（本文使用的是3.x版本）
vue add router（问是否使用history mode什么的选Y）

添加成功后项目会有个新目录

本文使用了feb-alive插件，不用也没有影响。
区别是如果使用了feb-alive插件这里的代码需要多写一个参数；如果是使用keep-alive标签，则把下面图片的feb-alive标签改为keep-alive，方法参数改为null。

项目还是用了element ui的组件
如何添加到项目可参考其官网

完整代码
App.vue

<template>
  <div id="app">
    <feb-alive><router-view /></feb-alive>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Login.vue

<template>
  <div>
    <div>登录页面</div>
    <el-button type="warning" @click="HelloWorld">HelloWorld</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    HelloWorld() {
      let that = this;
      that.$router.push({ path: "/HelloWorld" });
    },
  },
  created() {
    console.log("created...");
  },
  mounted() {
    console.log("mounted...");
  },
  activated() {
    console.log("activated...");
  },
};
</script>

<style>
</style>

HelloWorld.vue

<template>
  <el-form ref="form" :model="form" label-width="80px" label-position="left">
    <el-form-item label="活动ID">
      <el-input-number
        v-model="form.number"
        :min="1"
        :max="10"
        label="输入数字"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="上海" value="shanghai"></el-option>
        <el-option label="北京" value="beijing"></el-option>
        <el-option label="福建" value="fujian"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间">
      <el-col :span="11">
        <el-date-picker
          type="date"
          placeholder="选择开始日期"
          v-model="form.date1"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-date-picker
          placeholder="选择结束日期"
          v-model="form.date2"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源">
      <el-radio-group v-model="form.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button type="success" @click="test">test</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  data() {
    return {
      form: {
        number: 1,
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      let that = this;
      alert(JSON.stringify(that.form));
    },
    test() {
      let that = this;
      that.$router.push({ path: "/test" });
    },
  },
};
</script>

test.vue

<template>
  <div>test</div>
</template>

<script>
export default {};
</script>

<style>
</style>

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'
Vue.use(ElementUI);

Vue.config.productionTip = false

window.addEventListener('popstate', function() {
	if (document.URL.indexOf("/login") > -1) {
		history.pushState(history.state, null, document.URL)
	}
})
new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

router的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import HelloWorld from '../components/HelloWorld.vue'
import test from '../components/test.vue'
import febAlive from "feb-alive";
Vue.use(Router)

const routes = [{
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/HelloWorld',
    name: 'HelloWorld',
    component: HelloWorld,
  },
  {
    path: '/test',
    name: 'test',
    component: test,
  },
]

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,

});
Vue.use(febAlive, {
  router,
  keyName: "feb"
});
router.$addRoutes = (params) => {
  router.matcher = new Router({
    mode: "history"
  }).matcher;
  router.addRoutes(params);
};
/**
 * 路由导航守卫
 */
router.beforeEach((to, from, next) => {
  console.log("router.beforeEach");
  next();
});

export default router

效果
往下点击页面，其他页面间来回可通过浏览器的前进后退，返回登录页时前进按钮置灰。