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 } ]
Vue-Router + Vuex 实现单页面应用的更多相关文章
- Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
- Vue --6 router进阶、单页面应用(SPA)带来的问题
一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue环境搭建及单页面标签切换实例
复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...
- Vue 子路由 与 单页面多路由 的区别
本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- vue单页面条件下添加类似浏览器的标签页切换功能
在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
随机推荐
- 复习C++:VS2008中的宏干嘛用的
VS2008中有宏,可也进行编辑和设置. 好处: 1.快速生成代码,帮助开发. 2.个人定制化功能,IDE更合适自己用. 3.提升编程效率. 缺点: 使用VB开发,一开始用起来费事.不过有官方参考 ...
- js--单选按钮赋值
var sex='${userInfo.sex}'; if(sex=="女"){ $("input[name=sex][value='女']").attr(&q ...
- (备忘)怎么去除WinRAR弹窗广告?
1.在WinRAR的安装目录下新建一个记事本,命名为“rarreg.key”. 2.打开记事本,将一下内容复制进去. RAR registration data Federal Agency for ...
- 43-2-CAN协议
1.帧的种类 通信是通过以下 5 种类型的帧进行的. • 数据帧 • 遥控帧 • 错误帧 • 过载帧 • 帧间隔 另外, 数据帧和遥控帧有标准格式和扩展格式两种格式.标准格式有 11 个位的标识符(I ...
- [js]nodejs初探http/url/fs模块
难怪我没学会, 因为我的套路有问题. 错误点, 1,大而全 2,不注重思路 学习要领: 1, 小而精 2, 重思路(总结) nodejs特点: 1.node提供了js的运行环境, 一般将node运行在 ...
- openshift 容器云从入门到崩溃之八《日志聚合》
日志可以分为两部分 业务日志 业务日志一般是要长期保留的,以供以后有问题随时查询,elk是现在比较流行的日志方案,但是容器日志最好不要落地所以不能把logstash客户端包在容器里面 可以使用logs ...
- python数据结构-如何在列表、字典、集合中根据条件筛选数据
如何在列表.字典.集合中根据条件筛选数据 问题举例: 过滤列表[1, 2, 5, -1, 9, 10]中的负数 筛选字典{“zhangsan”:97, "lisi":80, &qu ...
- 关于npm Vue
参考:http://www.runoob.com/w3cnote/vue2-start-coding.html 安装vue脚手架 npm install vue-cli -g 查看当前脚手架版本 np ...
- navicat for mysql 数据库备份与还原
一, 首先设置, 备份保存路径 工具 -> 选项 点开 其他 -> 日志文件保存路径 二. 开始备份 备份分两种, 一种是以sql保存, 一种是保存为备份 SQL保存 右键点击你要备份的数 ...
- Oracle sqlplus的输出表的排版,数据表发生折行问题
当查寻数据表的时候,会发生折行的问题 这时,我们可以用下面的语句 设置每行显示的记录长度:set linesize 300; ---> 每行显示300个字符. 设置每页显示的 ...