分离路由

src/config/router.config.js

@@ -0,0 +1,24 @@
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@/views/home/index'), // 路由懒加载
+    meta: {
+      title: '首页', // 页面标题
+      keepAlive: false // keep-alive 标识
+    }
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('@/views/home/about'),
+    meta: {
+      title: '关于我',
+      keepAlive: false
+    }
+  }
+]

src/router/index.js

@@ -1,34 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { constantRouterMap } from '@/config/router.config'
+
+// hack router push callback
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
 
 Vue.use(Router)
-export const router = [
-  {
-    path: '/',
-    name: 'index',
-    component: () => import('@/views/home/index'), // 路由懒加载
-    meta: {
-      title: '首页', // 页面标题
-      keepAlive: false // keep-alive 标识
-    }
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import('@/views/home/about'),
-    meta: {
-      title: '关于我',
-      keepAlive: false
-    }
-  }
-]
 
-const createRouter = () =>
+const createRouter = () => new Router({
-  new Router({
+  mode: 'history',
-    // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
+  base: process.env.BASE_URL,
-    // base: '/app/',
+  scrollBehavior: () => ({ y: 0 }),
-    scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
-    routes: router
+})
-  })
 
-export default createRouter()
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter () {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router