feat: 完成 vue-router 路由划分以及模块配置 #61

src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="app">
-    Vue Cli 3
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'app'
+  name: 'App'
 }
 </script>
 

src/router/home/home.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    path: '/home',
+    home: 'home',
+    component: () => import(/* webpackChunkName: "home" */ '@/views/home/index.vue')
+  }
+]

src/router/home/other.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    path: '/other',
+    name: 'other',
+    component: () => import(/* webpackChunkName: "other" */ '@/views/other/index.vue')
+  }
+]

src/router/login/index.js

@@ -0,0 +1,10 @@
+
+const modules = require.context('.', true, /\.js$/)
+let moduleRoutes = []
+modules.keys().forEach(key => {
+  if (key !== './index.js') {
+    moduleRoutes = moduleRoutes.concat(modules(key).default)
+  }
+})
+// console.log(moduleRoutes)
+export default moduleRoutes

src/router/login/login.js

@@ -0,0 +1,6 @@
+export default [
+  {
+    path: '/login',
+    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue')
+  }
+]

src/router/routes.js

@@ -1,5 +1,11 @@
-import RouterModules from './modules'
+import HomeRouters from './home'
+import LoginRouters from './login'
 const commonRoute = [{
-  path: '/'
+  path: '/',
+  name: 'root',
+  redirect: '/home',
+  component: () => import(/* webpackChunkName: "layout" */ '@/views/layout/index.vue'),
+  children: HomeRouters
 }]
-export default commonRoute.concat(RouterModules)
+// TODO: 模块多到一定的规模，可以通过按需构建达到加快开发环境体验的目的
+export default commonRoute.concat(LoginRouters)

src/views/home/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="home">
+    dddd
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>

src/views/layout/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="layout">
+    <router-link :to="{ name: 'other' }">
+      <span>other</span>
+    </router-link>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Layout'
+}
+</script>

src/views/login/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="login">
+    login
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Login'
+}
+</script>

src/views/other/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ohter">
+    other
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Ohter'
+}
+</script>