添加vuex组件

package-lock.json

@@ -14,7 +14,8 @@
         "jquery": "^3.7.1",
         "perfect-scrollbar": "^1.5.6",
         "vue": "^2.6.14",
-        "vue-router": "^3.5.1"
+        "vue-router": "^3.5.1",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
@@ -10345,6 +10346,15 @@
         "prettier": "^1.18.2 || ^2.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.4.tgz",

package.json

@@ -13,7 +13,8 @@
     "jquery": "^3.7.1",
     "perfect-scrollbar": "^1.5.6",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

src/App.vue

@@ -1,5 +1,34 @@
 <template>
-  <div id="app">
+  <div id="app" :class="mainClass">
     <router-view/>
   </div>
-</template>
+</template>
+<script>
+
+
+export default {
+
+  computed:{
+    /**
+     * 授权页面添加特定类名
+     * @returns {string}
+     */
+    mainClass(){
+      const path = this.$route.path
+      console.log(path)
+      if(path.startsWith('/auth')){
+        return 'login-page'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height:100%;
+  min-height: 100vh;
+}
+
+</style>

src/router/index.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import RegisteredVue from '../views/registered/Registered.vue'
+import Login from '@/views/auth/Login.vue'
+import Register from '@/views/auth/Register.vue'
 
 Vue.use(VueRouter)
 
@@ -10,25 +11,24 @@ const routes = [
     path: '/home',
     name: 'home',
     component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('../views/login/Login.vue')
-  }, 
-  {
-    path: '/registered',
-    name: 'Registered',
-    component:RegisteredVue
   }
   ,{
     path:'',
     redirect:'/home'
+  },
+  {
+    path:'/auth',
+    component: Login,
+    children: [
+      {
+        path:'login',
+        component: Login
+      },
+      {
+        path:'register',
+        component: Register
+      }
+    ]
   }
 ]
 

src/views/auth/Register.vue

@@ -84,7 +84,7 @@
 <script>
 import { SendValidateCode_api,registered_api } from '@/request/api'
 export default {
-    name: 'Registered',
+    name: 'Register',
     data() {
         return {
             loader:false,

store/index.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)