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}
]
转载于:https://www.cnblogs.com/mrzhu/p/8119481.html
Vue-Router + Vuex 实现单页面应用相关推荐
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue 2.0 + Vue Router + Vuex 后台管理系统的骨架
https://github.com/helloyoucan/ba 用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node ...
- Vue入坑——vue-router单页面多路由配置
2019独角兽企业重金招聘Python工程师标准>>> 上一篇:vue-router如何传递参数 一起学vue--vue学习总路线 ----------^~^我是萌萌哒分割线^~^- ...
- vue打包如何将单页面应用打包成多页面应用
添加链接描述 在这一步里需要改动的文件都在build文件下,分别是: utils.js webpack.base.conf.js webpack.dev.conf.js webpack.prod.co ...
- vue router怎么设置每个页面标题
router.jsconst router = new Router({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/hom ...
- vue可缓存的单页面多标签页
先上传自己制作例子的截图吧,有时间的时候把重要代码片段再详细写下说明!! 源码请在下面这个地址下载 https://download.csdn.net/download/ying940718/1187 ...
- vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
- 使用 Vue.js 和 Flask 实现全栈单页面应用
原文链接: codeburst.io 在本教程中,我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互. 如果你只是想使用 Vue.js 库和 Flask 模板基本上是 ...
- Vue单页面在ios10系统上出现白屏的bug
一个bug 你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办?于是你打开你电脑上的Chrome浏览器,工作正常:打开Sa ...
最新文章
- 微信小程序实时获取用户经纬度
- 英雄联盟(LOL)实战技巧(作者:白银段位)
- mysql proxy性能差_mysql性能的检查和优化方法
- JAVA模拟某信网登录信息采集
- python并发运行
- byte二维数组表示
- 再见!经典版Edge!
- [Python] random.uniform( ) 函数教程与实例解析
- UltraEdit for Mac
- SCRT软件的使用教程
- vnc远程连接,5个步骤教你如何轻松实现vnc远程连接
- coreldraw的线条怎么变成圆头_CDR将照片变线条的三种方法
- 常见地图服务(WMS、WFS、WCS、TMS、WMTS
- Sh.k6p index.php,第二篇:shell基础命令(部分)
- Hyperledger Fabric2中文文档-修改通道配置
- Go error--cannot find package
- 国外类似VC的emule下载网站网址大全
- 使用Godaddy续费我的域名时遇到支付问题
- linux下iconv()函数的用法
- MAC 合并多个jpg文件为PDF
热门文章
- mysql 排序num_MySQL 实现row_number() 分组排序功能
- .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...
- wordvba编程代码大全_这几本基础编程书籍一定要看
- tableau linux无网络安装_四十二、Linux网络管理,软件安装,进程管理总结
- 【Pytorch神经网络实战案例】02 CIFAR-10数据集:Pytorch使用GPU训练CNN模版-方法②
- python网络爬虫系列(十)——chrome在爬虫中的使用
- LeetCode 1834. 单线程 CPU(排序 + 优先队列)
- LeetCode MySQL 1112. 每位学生的最高成绩
- LeetCode 1338. 数组大小减半
- 计算机用户登录,计算机术语:密码、用户、登录