创建，创建相关模板

Author: 2017coding

src/App.vue

@@ -6,7 +6,22 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  watch: {
+    $route (val) {
+      this.invalidRoute(val)
+    }
+  },
+  methods: {
+    invalidRoute (val) {
+      const matched = this.$route.matched
+      // 访问不存在的路由进入404页面
+      if (!matched || matched.length === 0 || val.path === '/404') {
+        this.$router.push('/404')
+        return
+      }
+    }
+  }
 }
 </script>
 

src/components/MavonEditor/index.vue

@@ -31,11 +31,7 @@ export default {
   data () {
     return {
       flag: 'inner', // 内 inner  外outside
-      editorValue: '',
-      errPlaceholder: `1. 描述你的问题
-                    2. 贴上相关代码 (请勿用图片代替代码)
-                    3. 贴上报错信息
-                    4 已经尝试过哪些方法仍然没解决 (附上相关链接)`
+      editorValue: ''
     }
   },
   watch: {

src/main.js

@@ -12,7 +12,7 @@ import 'mavon-editor/dist/css/index.css'
 import '@/common/config/errorLog' // 错误日志
 import '@/common/style/index.scss' // 自定义样式
 import prototype from '@/common/js/prototype' // 自定义方法，用于全局调用
-import { _getCookie, _removeCookie } from '@/common/js/storage'
+import { _getCookie } from '@/common/js/storage'
 
 Vue.config.productionTip = false
 
@@ -25,7 +25,7 @@ router.beforeEach((to, from, next) => {
   // 本地存在token，自动获取用户信息
   if (_getCookie('token')) {
     store.dispatch('user/setUserInfo').catch(() => {
-      _removeCookie('token')
+      // _removeCookie('token')
     })
   }
   next()

src/router/index.js

@@ -98,13 +98,6 @@ export const routes = [
       }
     ]
   },
-  {
-    path: '/write/:type',
-    alias: '/write',
-    component: () => import('@/views/write/index'),
-    name: '写文章' + +new Date(),
-    meta: { title: '写文章' }
-  },
   {
     path: '/search',
     redirect: '/search/child',
@@ -120,6 +113,26 @@ export const routes = [
         meta: { title: '搜索' }
       }
     ]
+  },
+  {
+    path: '/write',
+    component: () => import('@/views/write/index'),
+    name: '写文章' + +new Date(),
+    meta: { title: '写文章' }
+  },
+  {
+    path: '/401',
+    name: '401',
+    hidden: true,
+    meta: { title: '401', icon: '' },
+    component: () => import('@/views/errorPage/401')
+  },
+  {
+    path: '/404',
+    name: '404',
+    hidden: true,
+    meta: { title: '404', icon: '' },
+    component: () => import('@/views/errorPage/404')
   }
 ]
 

src/views/errorPage/401.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous text-line">Oops!</h1>
+        <h2 class="text-line">你没有权限去该页面</h2>
+        <h6 class="text-line">如有问题请联系管理员</h6>
+        <ul class="list-unstyled text-line">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/">回首页</router-link>
+          </li>
+          <li class="link-type"><a href="https://www.taobao.com/">逛逛淘宝</a></li>
+          <li class="link-type"><a href="https://github.com/">刷刷github</a></li>
+          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+    <el-dialog title="随便看" :visible.sync="dialogVisible">
+      <img class="pan-img" :src="ewizardClap">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import errGif from '@/views/errorPage/img/401.gif'
+
+export default {
+  name: 'Page401',
+  data () {
+    return {
+      errGif: errGif + '?' + +new Date(),
+      ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+      dialogVisible: false
+    }
+  },
+  methods: {
+    back () {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/' })
+      } else {
+        this.$router.go(-2)
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .errPage-container {
+    width: 800px;
+    margin: 100px auto;
+    .text-line{
+      padding: 5px 0px;
+      li{
+        padding: 5px 0px;
+      }
+    }
+    .pan-back-btn {
+      background: #008489;
+      color: #fff;
+      border: none!important;
+    }
+    .pan-gif {
+      margin: 0 auto;
+      display: block;
+    }
+    .pan-img {
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+    }
+    .text-jumbo {
+      font-size: 60px;
+      font-weight: 700;
+      color: #484848;
+    }
+    .list-unstyled {
+      font-size: 14px;
+      li {
+        padding-bottom: 5px;
+      }
+      a {
+        color: #008489;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>