Vue-Router + Vuex 实现单页面应用

Posted 2020-10-19 mrzhu

效果查看(一个食品安全网,大家也可以发布一些食品安全的见闻,尽举手之劳):

 

源代码:https://pan.baidu.com/s/1i43H3LV

如果想要服务器端代码可以在评论里说明一下

 

利用vue路由和vuex实现了一个单页面应用，项目结构如下:

入口：main.js

import ‘./global.css‘;
// 引用 vue 没什么要说的
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
import qs from ‘qs‘
Vue.prototype.$qs = qs
// 引用路由
import VueRouter from ‘vue-router‘
// 光引用不成，还得使用
Vue.use(VueRouter)
// 入口文件为 src/App.vue 文件 所以要引用
import App from ‘./App.vue‘
// 引用路由配置文件
import routes from ‘./routes‘
//引入data
import data from ‘./data‘
// 使用配置文件规则
const router = new VueRouter({
  routes
})
const store = new Vuex.Store({
  modules:data
});
// 跑起来吧
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  store,
  router: router,
  render: (createElement) => createElement(App)
})

app.vue:

<template>
  <div class="main">
    <div class="panel">
        <router-view>
        </router-view>
    </div>
    <div class="control">
      <div @click="toHome" class="item homeItem" :class="[selectMenu]">
        <div class="item-logo">
          <i class="iconfont icon-home vetically homeItem"></i>
        </div>
        <div class="item-text">
          <a class="homeItem">home</a>
        </div>
      </div>
      <div @click="toReport" class="item reportItem" :class="[selectMenu]">
        <div class="item-logo">
          <i class="iconfont icon-fabu vetically reportItem"></i>
        </div>
        <div class="item-text">
          <a class="reportItem">report</a>
        </div>
      </div>
    </div>
  </div>
</template>

toHome:function(){
      this.$store.commit(‘main/setSelectMenu‘,{menu:"home"})
      this.$router.replace("home");//之所以使用replace是不希望后退后回到之前的界面
    },
    toReport:function(){
      this.$store.commit(‘main/setSelectMenu‘,{menu:"report"})
      this.$router.replace("report");//之所以使用replace是不希望后退后回到之前的界面
    }

我们把所有的数据和数据的处理全部放在Vuex里面,也就是我们的data.js:

const main = {
  namespaced: true,
  state:{
    selectMenu:"home"
  },
  mutations:{
    setSelectMenu(state,obj){
      state.selectMenu = obj.menu;
    }
  }
}
const home = {
  namespaced: true,
  state:{
    type:"icon-new",
    data:[],
    pageIndex:1,
    scrollMaxValue:0,
    scrollPosition:0,
    isView:false,
    loading:false
  },
  mutations:{
    setSelectType(state,obj){
      state.type = obj.type;
    },
    setIsView(state,obj){
      state.isView = obj.value;
    },
    setScrollPosition(state,obj){
      state.scrollPosition = obj.value;
    },
    setScrollMaxValue(state,obj){
      state.scrollMaxValue = obj.value;
    },
    setPageIndex(state,obj){
      state.pageIndex = obj.value;
    },
    addPageIndex(state,obj){
      state.pageIndex = state.pageIndex + 1;
    },
    addData(state,obj){
      state.data = state.data.concat(obj.value);
    },
    clearData(state,obj){
      state.data = [];
    },
    setLoading(state,obj){
      state.loading = obj.value;
    }
  }
}
const report = {
  namespaced: true,
  state:{
    reportContent:"",
    imgList:[]
  },
  mutations:{
    setReportContent(state,obj){
      state.reportContent = obj.value;
    },
    clearImgList:function(state,obj){
      state.imgList = [];
    },
    addImgList:function(state,obj){
      var dic = {
        date:obj.date,
        data:obj.data
      }
      state.imgList.push(dic);
    },
    delImgList:function(state,obj){
      let len = state.imgList.length,
          item = null;
      for(let i = 0; i < len; i++){
        item = state.imgList[i];
        if(!!obj && !!item && item.date == obj.date){
          state.imgList.splice(i,1);
        }
      }
    }
  }
}
const details = {
  namespaced: true,
  state:{
    detailsText:"",
    imgList:[]
  },
  mutations:{
    setDetailsText(state,obj){
      state.detailsText = obj.value;
    },
    setImgList(state,obj){
      state.imgList = obj.value;
    },
    changeImgList:function(state,obj){
      let imgData = state.imgList;
      imgData[obj.index] = obj.value;
      state.imgList = imgData;
    }
  }
}
let result = {
  main:main,
  home: home,
  details:details,
  report: report
}
export default result;

路由:routes.js:

var home = () => import(‘./vue/home.vue‘)//这样做的目的是异步加载组件
var report = () => import(‘./vue/report.vue‘)
var details = () => import(‘./vue/details.vue‘)


// import home from ‘./vue/home.vue‘
// import blog from ‘./vue/blog.vue‘
// import about from ‘./vue/about.vue‘
// import topic from ‘./vue/topic.vue‘
// 配置路由
export default [
  {
    mode: ‘history‘,
    path: ‘/home‘,
    name:‘home‘,
    component: home
  },
  {
    mode: ‘history‘,
    path: ‘/details‘,
    name:‘details‘,
    component: details
  },
  {
    mode: ‘history‘,
    path: ‘/report‘,
    name:‘report‘,
    component: report
  }
]