分类：单页面

2020
12-22

vue 在单页面应用里使用二级套嵌路由

在一个单页面应用里使用二级套嵌路由目录结构如下：其中main.js为全局配置文件，App.vue为项目入口。main.js中路由配置如下importVuefrom'vue'//引入vueimportAppfrom'./App'//引入主模板importRouterfrom'vue-router'//引入router路由//引入项目的模块组件importlicaifrom'./components/licai'importhomefrom'./components/home'importwodefrom'./components/wode'importhome1from'./components/home/home... 继续阅读 >

2020
10-09

解决vue单页面应用进入页面加载所有 js 的问题

一般在index.js中都是这么引入的组件importfrom'@/pages/my'importCartfrom'@/pages/cart'importOrderfrom'@/pages/order'importTMapfrom'@/pages/map'importNewfrom'@/pages/new'换成这样就好啦constMy=r=>require.ensure([],()=>r(require('@/pages/my')),'my')constCart=r=>require.ensure([],()=>r(require('@/pages/cart')),'cart')constOrder=r=>require.ensure([],()=>r(require('... 继续阅读 >

2020
10-09

vue-cli单页面预渲染seo-prerender-spa-plugin操作

1vue-cli-plugin-prerender-spa使用方法：vueaddprerender-spa在安装的过程中会需要安装一个chrome，网速不好可能导致不能下载，导致安装失败，可以取消chrome的安装，然后手动下载放在指定的目录下；安装过程中选择需要预渲染的route安装成功：自动在main.js中加入：2使用prerender-spa-plugin插件cnpmiprerender-spa-plugin--save-devvue-cli2.0在build/webpack.prod.conf.js中：constPrerenderSPAPlugin=require('pr... 继续阅读 >

2020
10-08

解决vue单页面 回退页面 keeplive 缓存问题

场景：项目中遇到vue点击回退从A页跳到B页，缓存A页，当B页状态修改再次返回A时，A页查询条件缓存不刷新，列表刷新A页：B页：解决方法：利用keep-alive缓存需要缓存的页面1.在app.vue中改写router-view<template><divid="app"><keep-alive><router-viewv-if="$route.meta.keepAlive"><!--这里是会被缓存的视图组件，比如page1,page2--></router-view></keep-alive><router-viewv-if="!$route.meta... 继续阅读 >

2020
10-08

浅谈vue单页面中有多个echarts图表时的公用代码写法

html中：<divclass="charts1"/><divclass="charts2"/><divclass="charts3"/><divclass="charts4"/><divclass="charts5"/><divclass="charts6"/><divclass="charts7"/>数据处理就不用提了。嗯，直接画图：//画折线图drawLine(){//数据处理的方法this.dealEchartsData()varmyChartsArr=[]for(vari=1;i<=7;i++){this.myCharts=this.$echarts.init(document.getElementsByClassName(... 继续阅读 >