feat: 优化路由引入;增加错误页面

如上

src/components/layout/404.vue

+<template>
+    <div class="layout-404">
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Error',
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/router/home.router.js

+export default {
+    path: '/',
+    name: 'home',
+    meta: {
+        layout: 'DefaultLayout',
+        title: '首页'
+    },
+    component: () => import(/* webpackChunkName: "about" */ '@/views/home.vue')
+}

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-// import Bao3 from '../views/bao3.vue'
 
 Vue.use(VueRouter)
 
-const routes = [
-    {
-        path: '/',
-        name: 'home',
-        meta: {
-            layout: 'DefaultLayout',
-            title: '首页'
-        },
-        component: () => import(/* webpackChunkName: "about" */ '../views/home.vue')
-    },
-    {
-        path: '/page1',
-        name: 'Page1',
-        component: () => import(/* webpackChunkName: "about" */ '../views/page1.vue')
+let routes = []
+
+// 通配符404页面
+const wildcardRoutes = {
+    path: '*',
+    name: '*',
+    // hidden: true,
+    meta: {
+        layout: 'error',
+        title: '错误页面'
     },
-    {
-        path: '/page2',
-        name: 'page2',
-        meta: {
-            layout: 'layout-a',
-            title: '页面2'
-        },
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/page2.vue')
-    }
-]
+    component: () => import(/* webpackChunkName: "404" */ '@/views/404.vue')
+}
+
+// 引入所有路由文件
+function importAll(r) {
+    r.keys().forEach((path) => routes.push(r(path).default || r(path)))
+}
+importAll(require.context('@/router/', true, /\.router\.js/))
+
+routes.push(wildcardRoutes)
 
 const router = new VueRouter({
     mode: 'history',

src/router/page1.router.js

+export default {
+    path: '/page1',
+    name: 'Page1',
+    component: () => import(/* webpackChunkName: "about" */ '../views/page1.vue')
+}

src/router/page2.router.js

+export default {
+    path: '/page2',
+    name: 'page2',
+    meta: {
+        layout: 'layout-a',
+        title: '页面2'
+    },
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/page2.vue')
+}

src/views/404.vue

+<template>
+    <div class="page-404">
+        <h1>404</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+</style>