效果查看(一個食品安全網,大家也可以發布一些食品安全的見聞,盡舉手之勞):

?

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

　　

?

轉載于:https://www.cnblogs.com/mrzhu/p/8119481.html

總結

以上是生活随笔為你收集整理的Vue-Router + Vuex 实现单页面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。