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

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

 

源代码: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}
]