Hys

aaa.txt

@@ -0,0 +1 @@
+aaaa

src/App.vue

@@ -1,9 +1,10 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link to="/">Login</router-link> |
+      <router-link to="/home">Home</router-link> |
       <router-link to="/about">About</router-link> |
-      <router-link to="/test">Test</router-link>
+      <router-link to="/calender">Calender</router-link> |
     </div>
     <router-view />
   </div>

src/main.js

@@ -3,7 +3,20 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
-Vue.config.productionTip = false
+router.beforeEach((to, from, next) => {
+  if (to.meta.requireAuth) { // 验证是否需要登陆
+    if (store.state) { // 查询本地存储信息是否已经登陆
+      next()
+    } else {
+      next({
+        path: '/login', // 未登录则跳转至login页面
+        query: { redirect: to.fullPath } // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
+      })
+    }
+  } else {
+    next()
+  }
+})
 
 new Vue({
   router,

src/router/index.js

@@ -1,27 +1,41 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '../views/Login.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
+    name: 'Login',
     component: Home
   },
   {
     path: '/about',
     name: 'About',
+    meta: {
+      requireAuth: true // 配置此条，进入页面前判断是否需要登陆
+    },
     // 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/About.vue')
   },
   {
-    path: '/test',
-    name: 'Test',
-    component: () => import('../views/Test.vue')
+    path: '/calender',
+    name: 'Calender',
+    meta: {
+      requireAuth: true // 配置此条，进入页面前判断是否需要登陆
+    },
+    component: () => import('../views/Calender.vue')
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    meta: {
+      requireAuth: true // 配置此条，进入页面前判断是否需要登陆
+    },
+    component: () => import('../views/Home.vue')
   }
 ]
 

src/views/Calender.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="calender">
+    <h1>日历界面</h1>
+  </div>
+</template>

src/views/Home.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <br>
+    <h1>开始写markdown吧！</h1>
+    <button>保存</button>
   </div>
 </template>
 
+<!--
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+ import HelloWorld from '@/components/HelloWorld.vue'
 export default {
   name: 'Home',
   components: {
     HelloWorld
   }
 }
 </script>
+-->

src/views/Login.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="login">
+    <h1>Schedule note 用户登录</h1>
+    <form>
+        <div id="input">
+            学工号
+            <input type="text" name="userid" placeholder="请输入你的北大学工号">
+            <br>
+            登录密码
+            <input type="password" name="userpassword" placeholder="请输入你的登录密码">
+            <br>
+            <button v-on:click="loginCheck()">登录</button>
+        </div>
+    </form>
+  </div>
+</template>
+
+export default {
+  data () {
+
+  },
+  methods:{
+   loginCheck:function(){
+    alert(11111111111111111111)
+    }
+   }
+ }

test_vscode_pull

@@ -0,0 +1 @@
+hello