增加LoginMiddle组件

src/main.js

@@ -23,6 +23,8 @@ import {
   Icon,
   Row,
   Col,
+  Select,
+  Option
 } from 'element-ui';
 */
 

src/router/index.js

@@ -1,12 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from '../App.vue'
-import Home from '../views/Home/Home.vue'
 import Login from '../views/Login/Login.vue'
-import Aa from '../views/A/Aa.vue'
-import Ab from '../views/A/Ab.vue'
-import Ac from '../views/A/Ac.vue'
-import Ad from '../views/A/Ad.vue'
+import LoginMiddle from '../views/LoginMiddle/LoginMiddle.vue'
+import Home from '../views/Home/Home.vue'
+// import Aa from '../views/A/Aa.vue'
+// import Ab from '../views/A/Ab.vue'
+// import Ac from '../views/A/Ac.vue'
+// import Ad from '../views/A/Ad.vue'
 
 Vue.use(VueRouter)
 
@@ -26,33 +27,37 @@ const routes = [
 		path: '/login',
 		name: 'login',
 		component: Login
-		
+	},
+	{
+		path: '/loginMiddle',
+		name: 'loginMiddle',
+		component: LoginMiddle
 	},
 	{
 		path: '/home',
 		name: 'home',
 		component: Home,
 		children: [
-			{
-				path: '/home1_1',
-				name: 'home1_1',
-				component: Aa
-			},
-			{
-				path: '/home1_2',
-				name: 'home1_2',
-				component: Ab
-			},
-			{
-				path: '/home1_3',
-				name: 'home1_3',
-				component: Ac
-			},
-			{
-				path: '/home1_4',
-				name: 'home1_4',
-				component: Ad
-			}
+			// {
+			// 	path: '/home1_1',
+			// 	name: 'home1_1',
+			// 	component: Aa
+			// },
+			// {
+			// 	path: '/home1_2',
+			// 	name: 'home1_2',
+			// 	component: Ab
+			// },
+			// {
+			// 	path: '/home1_3',
+			// 	name: 'home1_3',
+			// 	component: Ac
+			// },
+			// {
+			// 	path: '/home1_4',
+			// 	name: 'home1_4',
+			// 	component: Ad
+			// }
 		]
 	},
 	{

src/router/routes.js

@@ -1,7 +1,39 @@
+import Home from '../views/Home/Home.vue'
+import Aa from '../views/A/Aa.vue'
+import Ab from '../views/A/Ab.vue'
+import Ac from '../views/A/Ac.vue'
+import Ad from '../views/A/Ad.vue'
 export default [
   {
     path: '/about',
     name: 'about',
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  },
+  {
+		path: '/home',
+		name: 'home',
+		component: Home,
+		children: [
+			{
+				path: '/home1_1',
+				name: 'home1_1',
+				component: Aa
+			},
+			{
+				path: '/home1_2',
+				name: 'home1_2',
+				component: Ab
+			},
+			{
+				path: '/home1_3',
+				name: 'home1_3',
+				component: Ac
+			},
+			{
+				path: '/home1_4',
+				name: 'home1_4',
+				component: Ad
+			}
+		]
+	},
 ]

src/views/Login/Login.vue

@@ -43,7 +43,7 @@ export default {
             console.log(this.form)
             console.log(this.$route.meta)
             this.$router.push({
-                path: "/home"
+                path: "/loginMiddle"
             });
         }
     },

src/views/LoginMiddle/LoginMiddle.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="LoginMiddle">
+        <article class="article">
+            <el-select v-model="optionValue" placeholder="请选择活动区域">
+                <el-option label="选项一" value="1"></el-option>
+                <el-option label="选项二" value="2"></el-option>
+                <el-option label="选项三" value="3"></el-option>
+                <el-option label="选项四" value="4"></el-option>
+            </el-select>
+            <el-button type="primary" @click="OnConfirm">确定</el-button>
+        </article>
+    </div>
+</template>
+<script>
+export default {
+    name: "LoginMiddle",
+    data() {
+        return {
+            optionValue: '1'
+        }
+    },
+    methods: {
+        OnConfirm() {
+            console.log(this.optionValue)
+            this.$router.push({
+                path: "/home"
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.LoginMiddle {
+    width: 100%;
+    height: 100vh;
+    background-color: rgba($color: #000000, $alpha: 0.6);
+    display: flex;
+    justify-content: center;
+    .article {
+        width: 400px;
+        height: 150px;
+        padding: 20px 0;
+        background-color: #fff;
+        border-radius: 20px;
+        margin-top: 10%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+}
+</style>