前言
刚进新公司，有幸接触到从前后端不分离到前后端分离的一个过程，最开始对vue不太熟悉，下班自学一周就开始做了，可能会有很多问题，若有写不好的地方大佬们可以提出。
一、实现效果
需求：vue底部导航点击切换图标
效果：
二、大概思路图
三、代码实现
index.js(vuex)
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {// 目录标识（感觉不应该使用 localStorage，应该使用sessionStorage）DirectoryIdentifier: localStorage.getItem('DirectoryIdentifier') ? localStorage.getItem('DirectoryIdentifier') : ''},mutations: {// 保存目录标识saveDirectoryIdentifier (state, directoryIdentifier) {localStorage.setItem('DirectoryIdentifier', directoryIdentifier)state.DirectoryIdentifier = directoryIdentifier}}})export default store
login.vue
methods: {login () {if (this.loginForm.username === '' || this.loginForm.tmpPassword === '') {this.showPopup('账号或密码不能为空')} else {api.login(this.loginForm).then((data) => {console.log(data)if (data.code === '1') {// 保存目录标识(device)this.$mit('saveDirectoryIdentifier', 'device')this.$router.push('/home/device')} else {this.showPopup(data.message)}})}}
index.vue
<template><div class = "main"><div><router-view></router-view></div><ul class="nav-bottom"><li @click="directoryIdentifierClick('device')" v-if="isShowDevice"><router-link to="/home/device"><div><span class="nav-bottom-span nav-img"><img :src='deviceImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('deviceSensor')" v-if="isShowDeviceSensor"><router-link to="/home/device_sensor"><div><span class="nav-bottom-span nav-img"><img :src='deviceSensoImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('hospital')" v-if="isShowHospital"><router-link to="hospital" ><div><span class="nav-bottom-span nav-img"><img :src='hospitalImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('doctorReport')" v-if="isShowdDoctorReport"><router-link to="/home/doctor_report"><div><span class="nav-bottom-span nav-img"><img :src='doctorReportImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li><li @click="directoryIdentifierClick('user')" v-if="isShowUser"><router-link to="/home/user"><div><span class="nav-bottom-span nav-img"><img :src='userImgUrl'></span><span class="nav-bottom-span">名称</span></div></router-link></li></ul></div></template><script>export default {name: 'Home',data () {return {deviceImgUrl: '../../../static/img/device-nav-out.png',deviceSensoImgUrl: '../../../static/img/device-sensor-out.png',hospitalImgUrl: '../../../static/img/hospital-nav-out.png',doctorReportImgUrl: '../../../static/img/prescription-nav-out.png',userImgUrl: '../../../static/img/user-out.png',isShowDevice: false,isShowDeviceSensor: false,isShowHospital: false,isShowdDoctorReport: false,isShowUser: false}},// 钩子事件(触发机制:初始化) 刷新标识定位问题mounted: function () {// 这个是获取权限，如果没有可以去掉this.getWechatChanelAcl()// mounted - 初始化定位标识this.initIdentifier()},// 钩子事件(触发机制：数据修改时)beforeUpdate: function () {// 这个是获取权限，如果没有可以去掉this.getWechatChanelAcl()},methods: {directoryIdentifierClick (directory) {this.setGrayIdentifier(directory)this.$mit('saveDirectoryIdentifier', directory)},// 设置灰色图片setGrayIdentifier (directory) {this.deviceImgUrl = (directory === 'device' ? '../../../static/img/device-nav-active.png' : '../../../static/img/device-nav-out.png')this.deviceSensoImgUrl = (directory === 'deviceSensor' ? '../../../static/img/device-sensor-active.png' : '../../../static/img/device-sensor-out.png')this.hospitalImgUrl = (directory === 'hospital' ? '../../../static/img/hospital-nav-active.png' : '../../../static/img/hospital-nav-out.png')this.doctorReportImgUrl = (directory === 'doctorReport' ? '../../../static/img/prescription-nav-active.png' : '../../../static/img/prescription-nav-out.png')this.userImgUrl = (directory === 'user' ? '../../../static/img/user-active.png' : '../../../static/img/user-out.png')},// mounted - 初始化定位标识initIdentifier () {let directoryIdentifier = this.$store.state.DirectoryIdentifierif (directoryIdentifier === null) {this.deviceImgUrl = '../../../static/img/device-nav-active.png'} else {this.setGrayIdentifier(directoryIdentifier)}},// mounted-beforeUpdate 获取目录资源权限getWechatChanelAcl () {let wechatChanelAcl = JSON.parse(this.$store.state.WechatChanelAcl)for (let index = 0; index < wechatChanelAcl.length; index++) {const chanelAcl = wechatChanelAcl[index]if (chanelAcl.permission === 'wecharsalechanel:rp_device:list') {this.isShowDevice = true} else if (chanelAcl.permission === 'wecharsalechanel:device_sensor:list') {this.isShowDeviceSensor = true} else if (chanelAcl.permission === 'wecharsalechanel:hospital:list') {this.isShowHospital = true} else if (chanelAcl.permission === 'wecharsalechanel:doctor_report:list') {this.isShowdDoctorReport = true} else if (chanelAcl.permission === 'wecharsalechanel:user:list') {this.isShowUser = true}}}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.main {background: #eee;}.nav-bottom {padding-top: 0;width: 100%;position: fixed;bottom: 0;border-top: 1px solid #eee;color: gray;background: #fff;height: 4rem;}.nav-bottom>li {float: left;width: 20%;text-align: center;box-sizing: border-box;height: 4rem;}.nav-bottom-span {font-size: 14px;display: block;line-height: 0.6rem;padding-top: 0.6rem;}.nav-img img {height: 1.3rem;}</style>
