毕业设计Day10--vue配置路由

安装vuex

输入以下代码

npm install vuex@3.6.2 --save

引入vuex

在vue->src->main.js中引入vuex

在vue->src下建立文件夹store，新建index.js，内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        currentPathName:''
    },
    mutations:{
        setPath(state){
            state.currentPathName = localStorage.getItem("currentPathName")
        }
    }
})

export default store

在router->index.js中写下代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: ()=> import("../views/ManageView"),
    redirect:"/home",
    children:[
      {path:'home',name:'首页',component:()=>import('../views/HomeView')},
      {path:'user',name:'用户管理',component:()=>import('../views/UserView')},
    ]
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component:()=>import('../views/LoginView')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//路由守卫
router.beforeEach((to,from,next)=>{
  localStorage.setItem("currentPathName",to.name)//设置当前的路由名称，为了在Header主键中使用
  store.commit("setPath")//触发store的数据更新
  next()//放行路由
})

export default router

使用vuex

建立Header.vue

<template>
  <div style=" font-size: 12px;line-height:60px;display:flex">
    <div style="flex:1;font-size:20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>


        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;margin-left: 10px">
        <el-breadcrumb-item :to="{ path: '/' }" >  首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>


    </div>
    <el-dropdown style="width: 70px;cursor:pointer">
      <span>小温</span>
      <i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>

<script>
export default {
  name: "Header",
  props:{
    collapseBtnClass:String,
    collapse:''
  },

  computed:{
    currentPathName(){
      return this.$store.state.currentPathName;//需要监听的路由
    }
  },
  watch:{
    currentPathName(newVal,oldVal){
      console.log(newVal)
    }
  },
  data(){
    return{
      //currentPathName:this.$store.state.currentPathName

    }
  }
}
</script>

<style scoped>

</style>

建立Aside.vue

<template>
  <el-menu :default-openeds="['1', '3']"
           style="min-height:100%; overflow-x:hidden;"
           background-color="rgb(251,185,197)"
           active-text-color="rgb(255,224,230)"
           :collapse-transition="false"
           :collapse="isCollapse"
           router
  >
    <div style="height:60px;line-height: 60px;text-align: center">
      <img src="../assets/car.png" alt="" style="width:20px;position:relative;top:5px;margin-right: 5px;">
      <b v-show="!isCollapse">小温的停车场管理系统</b>
    </div>

    <el-menu-item index="/">
      <i class="el-icon-house"></i>
        <span slot="title">主页</span>
      
    </el-menu-item>

    


    <el-submenu index="2">
      <template slot="title"><i class="el-icon-menu"></i>
        <span slot="title">系统管理</span>
      </template>
      <el-menu-item index="/user">
        <template slot="title"><i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span></template>
      </el-menu-item>

    </el-submenu>

  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  props:{
    isCollapse: Boolean,

  }
}
</script>

<style scoped>

</style>

ManagerView.vue

将原先的HomeView更名为ManagerView，内容如下

<template>
 <div style="height:100%">
   <el-container style="height: 100vh  ">
     <el-aside width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);height:100% ;box-shadow: rgba(0,21,41,0.35) 2px 0px 6px;">
        <Aside :isCollapse="isCollapse"  />
     </el-aside>

     <el-container>
       <el-header style=" border-bottom:1px solid #ccc">
         <Header :collapseBtnClass="collapseBtnClass" :collapse='collapse' />

       </el-header>

       <el-main>
<!--          表示当前页面的子路由会在router-view中展示-->
         <router-view />
       </el-main>
     </el-container>
   </el-container>




 </div>
</template>


<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'ManageView',
  components: {
    Aside,
    Header
  },
  data(){
    return{


      msg:"hello 小温",
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200
    }
  },


  methods:{
    collapse(){   // 点击收缩按钮触发
      this.isCollapse=!this.isCollapse
      if(this.isCollapse){
        this.sideWidth = 60
        this.collapseBtnClass = 'el-icon-s-unfold'
      }else{
        this.sideWidth=200
        this.collapseBtnClass='el-icon-s-fold'
      }
    },
    load(){
      this.request.get("http://localhost:9090/user/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          username: this.username,
          email: this.email,
          carnum: this.carnum
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.records
        this.total = res.total
      })
    }

  }
}
</script>

标记：未解决的bug（现已解决）

在Aside.vue中，主页部分若写在el-submenu下，则无法正常跳转，若写在el-menu-item下，则收缩无图标，仍待解决
解决办法：将主页部分的template标签去掉即可