网站建设与管理课程心得体会,目前比较流行的公司网站建站技术,微网站自己可以做么,江西网站制作效果查看(一个食品安全网,大家也可以发布一些食品安全的见闻,尽举手之劳): 源代码:https://pan.baidu.com/s/1i43H3LV 如果想要服务器端代码可以在评论里说明一下 利用vue路由和vuex实现了一个单页面应用#xff0c;项目结构如下: 入口#xff1a;main.js import ./global.cs… 效果查看(一个食品安全网,大家也可以发布一些食品安全的见闻,尽举手之劳): 源代码: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: templatediv classmaindiv classpanelrouter-view/router-view/divdiv classcontroldiv clicktoHome classitem homeItem :class[selectMenu]div classitem-logoi classiconfont icon-home vetically homeItem/i/divdiv classitem-texta classhomeItemhome/a/div/divdiv clicktoReport classitem reportItem :class[selectMenu]div classitem-logoi classiconfont icon-fabu vetically reportItem/i/divdiv classitem-texta classreportItemreport/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
