做vue项目时,有时要在某些页面做缓存,而其它页面不要.比如:A:首页,B:获取所有订单页面,C:订单详情页面:从A(首页)进入 B(获取所有订单)时应该不缓存,B(所有订单)进入 C(订单详情)订单后时再返回B,此时B(所有订单页面)缓存.不需要再次刷新,即:A->B->C时都是刷新,而C->B->A时B缓存.在vue官方文档2.x以上有include 和 exclude 属性允许组件有条件地缓存.在这里主要用include结合vuex来实现,include 是根据组件的name…

什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件. 官网释义: <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive…

使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄....还有很多,为了数据的简单明了,只举例部分数据即可 在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄.而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在…

通过配置路由,可以设置vue项目启动后默认显示的页面.路由的path设置为path:"/",启动项目后就会显示默认的组件页面. import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Home from '../components/Home.vue' import View from '../components/View.vue' import ViewTwo from '../com…

vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求…

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', redirect: '/main', },{ path: '/main', name: 'Main', component: ()=> import('@/views/Main'), children: [ { //path: '/testPage', //这种方式 不配置参数名, 页面刷新会丢失…

VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/details/80944513…

在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push({ path:'/order',//跳转路径 name: 'Order',//跳转路径的name值,不写跳转后页面取不到参数 // 参数 query: { name: 'name', dataObj: {} } }) }, //跳转后页面取参 mounted(){ // 路由参数 let mm =…

Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 代码片段(router/index.js) 说明:代码中动态路由的获取是通过解析菜单资源获取的 import Vue from "vue"; import Router from "vue-…

原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div>…