src/router/index.js

@@ -1,20 +1,10 @@
 import Router from "vue-router"
-// import store from "@/store/index.js"
+import store from "@/store/index.js"
 let router = new Router({
     routes:[
         {
             path:"/",
-            component:() => import("../views/index.vue"),
+            component:() => import("../views/index.vue")
-            children:[
-                {
-                    path:"list",
-                    component: () => import("@/views/list.vue")
-                },
-                {
-                    path:"add",
-                    component: () => import("@/views/add.vue")
-                }
-            ]
         },
         {
             path:"/login",
@@ -23,19 +13,15 @@ let router = new Router({
     ]
 })
 
-// router.beforeEach((to, from, next) => {
+router.beforeEach((to, from, next) => {
-//     if(store.state.quanxian){
+    console.log(to.path,store.state.quanxian)
-//         next()
+    if(store.state.quanxian){
-//     }else if(to.path != "/login"){
+        next()
-//         router.push("/login")
+    }else if(to.path != "/login"){
-//     }else{
+        router.push("/login")
-//         next()
+    }else{
-//     }
+        next()
-// })
+    }
-// 路由守卫可以写多个 只有都执行了next 才跳转
-router.beforeEach((to,from,next) => {
-    console.log(to)
-    next()
 })
 
 export default router

src/store/index.js

@@ -4,37 +4,11 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
     state: {
-        quanxian: false,
+        quanxian: false
-        list:[
-            {
-                name:"学生1",
-                sex:"0",
-                id:0
-            },
-            {
-                name:"学生2",
-                sex:"1",
-                id:1
-            },{
-                name:"学生3",
-                sex:"0",
-                id:2
-            },{
-                name:"学生4",
-                sex:"1",
-                id:3
-            },
-        ]
     },
     mutations: {
         setquanxian(state,data){
             state.quanxian = data
-        },
-        dellist(state,id){
-            state.list.splice(state.list.findIndex(item => item.id === id), 1)
-        },
-        addlst(state,info){
-            state.list.push(info)
         }
     }
 })

src/views/add.vue

@@ -1,50 +0,0 @@
-<template>
-    <div class="add">
-        <el-form :inline="true" :model="info" class="demo-form-inline">
-            <el-form-item label="姓名">
-                <el-input
-                    v-model="info.name"
-                    placeholder="请输入姓名"
-                ></el-input>
-            </el-form-item>
-            <el-form-item label="性别">
-                <el-select v-model="info.sex" placeholder="请选择性别">
-                    <el-option label="男" value="0"></el-option>
-                    <el-option label="女" value="1"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmit">添加</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
-</template>
-<style scoped>
-.add{
-    padding: 100px 0 0 100px;
-}
-</style>
-<script>
-export default {
-    data(){
-        return {
-            info:{
-                name:"",
-                sex:""
-            }
-        }
-    },
-    methods:{
-        onSubmit(){
-            this.info.id = new Date().getTime()
-            console.log(this.info)
-
-            this.$store.commit("addlst",this.info)
-            this.$message({
-                message: '添加成功',
-                type: 'success'
-            });
-        }
-    }
-};
-</script>

src/views/index.vue

@@ -1,58 +1,14 @@
 <template>
     <div>
-        <div class="menu">
+        这是首页
-            <el-menu
+        {{$store.state.quanxian}}
-                default-active="2"
+    </div>    
-                class="el-menu-vertical-demo"
-               
-                @select="select"
-            >
-                <el-submenu index="1">
-                    <template slot="title">
-                        <i class="el-icon-location"></i>
-                        <span>学生管理</span>
-                    </template>
-                    <el-menu-item-group>
-                        <template slot="title">查看</template>
-                        <el-menu-item index="list">列表</el-menu-item>
-                    </el-menu-item-group>
-                    <el-menu-item-group title="修改">
-                        <el-menu-item index="add">添加</el-menu-item>
-                    </el-menu-item-group>
-                   
-                </el-submenu>
-               
-            </el-menu>
-        </div>
-        <div class="body">
-            <router-view></router-view>
-        </div>
-    </div>
 </template>
 <style scoped>
-.menu{
+
-    width:200px;
-    height: 100vh;
-    border-right: 1px solid #ececec;
-    float: left;
-}
-.el-menu{
-    border: none;
-}
-.body{
-    width: calc(100% - 202px);
-    float: right;
-    height: 100vh;
-    background-color: #efefef;
-}
 </style>
 <script>
 export default {
-    methods:{
+    
-        select(index){
+}
-            console.log(index)
-            this.$router.push("/" + index)
-        }
-    }
-};
 </script>

src/views/list.vue

@@ -1,52 +0,0 @@
-<template>
-    <div>
-        <el-table
-        :data="list"
-        style="width: 100%">
-        <el-table-column
-            prop="name"
-            label="姓名"
-            width="180">
-        </el-table-column>
-        <el-table-column
-            label="性别"
-            width="180">
-            <template slot-scope="scope">
-                {{scope.row.sex == 0 ? "男" : "女"}}
-            </template>
-        </el-table-column>
-        <el-table-column
-            label="删除"
-            width="180">
-            <template slot-scope="scope">
-                <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
-            </template>
-        </el-table-column>
-        </el-table>
-    </div>
-</template>
-<style scoped>
-
-</style>
-<script>
-import { mapState } from 'vuex'
-export default {
-    data(){
-        return {
-           
-        }
-    },
-    methods:{
-        del(id){
-            console.log(id)
-            this.$store.commit("dellist",id)
-        }
-    },
-    computed:{
-        ...mapState({
-            list: state => state.list
-        })
-    }
-
-}
-</script>