记录vue的一些踩坑日记

记录vue的一些踩坑日记

安装Jq

npm install jquery --save

vue列表跳转到详情页，再返回列表的时候不刷新页面并且保持原位置不变；

解决：使用keepAlive

  1. 在需要被缓存的页面的路由中添加：keepAlive: true,
 {path: '/viewExamine',name: 'viewExamine',component: () => import('@/views/viewExamine'),meta: {keepAlive: true, },},
  1. 记录位置

const router = new VueRouter({// mode: 'history',mode: 'hash', //刷新之后找不到页面用这个base: process.env.BASE_URL,routes,//记录位置scrollBehavior: (to, from, savedPosition) => { if (savedPosition) {     return savedPosition} else { return { x: 0, y: 0 }}}
})
  1. 在app.vue中：
<template><div id="app" v-cloak><!-- 可以被缓存的视图组件 --><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不可以被缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view> </div>
</template>

然后，就可以啦，问题就解决了（返回列表页不会触发created）

vue退出登录后,如何清空keep-alive缓存

问题描述:在项目中,有个页面用到了keep-alive。但是,当我点击退出登录,切换了其他账号登录后,保留的还是上一个账号的数据信息,最终采取了以下方法解决的。

原文：https://blog.csdn.net/weixin_50446072/article/details/125541134

代码如下:(app.vue)

<template><div id="app"><keep-alive v-if="isLoggedIn"><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive||!isLoggedIn"></router-view></div>
</template><script>
export default {data() {return {isLoggedIn: false,};},watch: {$route(to, from) {// if the route changes...let token = localStorage.getItem("court-token") || "";if (token) {// firebase returns null if user logged outthis.isLoggedIn = true;} else {this.isLoggedIn = false;}},},
};
</script>

转化时间戳

  1. 过滤器
Vue.filter('dateFormat_sfm', time => {//年月日时分秒var now = new Date(time);var nian = now.getFullYear();var yue = (now.getMonth() + 1).toString().padStart(2, "0");var ri = now.getDate().toString().padStart(2, "0");var shi = now.getHours().toString().padStart(2, "0");var fen = now.getMinutes().toString().padStart(2, "0");var miao = now.getSeconds().toString().padStart(2, "0");if (time === undefined) {return ``;} else {return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}`; //}
})
  1. mixin
  1. npm install moment --save（如果想使用moment）
  2. 在src下创建一个mixin文件夹 里面创建一个index.js
//import moment from 'moment'const mixin = {methods: {getTimeSFM(time) {// if (time !== undefined) {//     return moment(time).format('YYYY-MM-DD HH:mm:ss')// } else {//     return ''// }//年月日时分秒var now = new Date(time);var nian = now.getFullYear();var yue = (now.getMonth() + 1).toString().padStart(2, "0");var ri = now.getDate().toString().padStart(2, "0");var shi = now.getHours().toString().padStart(2, "0");var fen = now.getMinutes().toString().padStart(2, "0");var miao = now.getSeconds().toString().padStart(2, "0");if (time === undefined) {return ``;} else {return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}`; //}},getTime(time) {// if (time !== undefined) {//     return moment(time).format('YYYY-MM-DD')// } else {//     return ''// }//年月日时分秒var now = new Date(time);var nian = now.getFullYear();var yue = (now.getMonth() + 1).toString().padStart(2, "0");var ri = now.getDate().toString().padStart(2, "0");var shi = now.getHours().toString().padStart(2, "0");var fen = now.getMinutes().toString().padStart(2, "0");var miao = now.getSeconds().toString().padStart(2, "0");if (time === undefined) {return ``;} else {return `${nian}-${yue}-${ri}`; //}}}
}
export default mixin

局部引入：(在需要用到的页面）

  • import mixin from “@/mixin/index”;
  • mixins: [mixin],

在这里插入图片描述
全局引入：（main.js）

  • import MiXin from ‘@/mixin/index’
  • Vue.mixin(MiXin)
  1. 可以直接使用在div里面： <div class="">领用日期：{{ getTime(item.useTime) }}</div>

在这里插入图片描述

解决编程式路由往同一地址跳转时会报错的情况


//解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
//push
VueRouter.prototype.push = function push(location, onResolve, onReject) {if (onResolve || onReject)return originalPush.call(this, location, onResolve, onReject);return originalPush.call(this, location).catch(err => err);
};
//replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {if (onResolve || onReject)return originalReplace.call(this, location, onResolve, onReject);return originalReplace.call(this, location).catch(err => err);
};

在这里插入图片描述

多次打包之后：浏览器会有缓存

在 html 文件中加入 meta 标签，content 属性设置为no-cache;

public/index.html

  <meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"><meta http-equiv="expires" content="0">
项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；

在这里插入图片描述

vue.config.js

const { defineConfig } = require('@vue/cli-service');
const Timestamp = new Date().getTime();
module.exports = defineConfig({//  在打包时取消生成.map文件//在开发模式为true，有报错信息可以查看精确到行列(因为打包之后所有代码都打入一个js文件)productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,transpileDependencies: true,lintOnSave: true, //eslint，默认是truepublicPath: './',//因为webpack不认识@。 // 设置出口：解决打包缓存// 修改输出js目录名及文件名configureWebpack: {output: {//js表示在dist生成一个js文件夹//[name]自动根据生成名字//[hash:6]打包之后会生成一个hash值. :6表示取hash前6位//[chunkhash]打包会生成一个chunkhash值，只有每次修改配置chunkhash才会变化filename: `js/[name].[chunkhash].${Timestamp}.js`,chunkFilename: `js/[name].[chunkhash].${Timestamp}.js`}},// 修改输出css目录名及文件名css: {extract: {filename: `css/[name].[chunkhash].${Timestamp}.css`,chunkFilename: `css/[name].[chunkhash].${Timestamp}.css`}},

打包之后的文件：每次生成的文件名称都是不一样的

在这里插入图片描述

这是只设置了js文件名：在这里插入图片描述

vue配置环境:开发环境、测试环境、正式环境

项目根目录下新建文件：.env.development、.env.production、.env.test

在这里插入图片描述

NODE_ENV = 'development'。//是node的语言 process.env.NODE_ENV就可以访问到值
VUE_APP_MODE = 'development'// 在vue中 要写成VUE_APP开头并大些
VUE_APP_BASE_API =  window.apiURL;//这里:'http://xxx:8080'(你的开发环境)

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_API = window.apiURL;//这里:'http://xxx:8080'(你的开发环境)

​​​​​​​NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_BASE_API = window.apiURL;//这里:'http://xxx:8080'(你的开发环境)

package.json中配置：

  "scripts": {"serve": "vue-cli-service serve","test": "vue-cli-service serve --mode test","prod": "vue-cli-service serve --mode production","build": "vue-cli-service build","build:test": "vue-cli-service build --mode test","build:prod": "vue-cli-service build --mode production", "lint": "vue-cli-service lint"},

启动命令：

npm run serve;//开发环境
npm run test;//测试环境
npm run prod;//正式环境

打包命令：

npm run build;//开发环境
npm run build:test;//测试环境
npm run build:prod;//正式环境

window.apiURL:是获取当前项目启动的服务器的路径+端口(场景：没有固定的地址）

  • 新建文件：public/index.js
    在这里插入图片描述
  • index.js
const apiURL = window.location.origin
  • index.html中：
  <script type="text/javascript" src="<%= BASE_URL %>index.js"></script><script>// 然后使用window对象window.apiURL = apiURL</script>
  • utils/request.js
// 1.创建一个新的axios实例，设置基地址
const request = axios.create({// baseURL:process.env.VUE_APP_BASE_API + "/xxx",baseURL: window.apiURL + "/xxx", // 正式timeout: 10000
});

这样的话，不管你的项目部署在那个地址下，都不用再改路径和端口了。

Eslint：常见打包报错

  • 注释：//后面应该有空格；
  • Operator ‘===’ must be spaced 使用’= = =’ 而不是’= =’
  • Import in body of module; reorder to top import/first：将所有的import挡在最前面；
  • 使用 let/const 而不是var;

vue中使用params传参，刷新页面后params参数丢失解决方案

解决方案：

1. 配合sessionStorage实现刷新页面后数据不丢失

(网上很多都是使用localStorage配合使用，但是有个问题是将当前页面直接关闭了，重新进来后localStorage还是存在的。而使用sessionStorage，页面关闭后会自动删除)

export default {created(){let paramsData = sessionStorage.getItem("paramsData");let params;if(paramsData){params = JSON.parse(sessionStorage.getItem("paramsData"));}else{params = this.$route.params;sessionStorage.setItem("paramsData", JSON.stringify(params));}this.params = params;},// 页面销毁之前beforeDestroy() {sessionStorage.removeItem('paramsData')},}

2. 使用动态路由

使用动态路由，访问路由地址为：/vuew1/username/6110（感觉和query访问差不多，如果参数多点路由地址会显得很长，不大美观。）
在router.js中设置路由

const routes = [{path: '/view1/:name/:idno',name: 'view1',component: () => import( '../admin/view1.vue')},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})

页面中使用

this.$router.push({name:'view1', params:{name:'张三', idno:'123123'}});
<router-link :to="{name:'view1', params: {name:'张三', idno:'123123'}}">跳转</router-link>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/13149.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu环境安装centos7虚拟机网络主机不可达，ping不通

ubuntu环境安装centos7虚拟机网络主机不可达，ping不通

【NAT模式下解决】1.首先vi /etc/sysconfig/network-scripts/ifcfg-ens33检查ONBOOTyes&#xff0c;保存 2.输入systemctl restart network命令重启网关
阅读更多...
flutter：轮播

flutter：轮播

前言 介绍几个比较有不错的轮播库 swipe_deck 与轮播沾边&#xff0c;但是更多的是一种卡片式的交互式界面设计。它的主要概念是用户可以通过左右滑动手势浏览不同的卡片&#xff0c;每张卡片上都有不同的信息或功能。 Swipe deck通常用于展示图片、产品信息、新闻文章、社…
阅读更多...
第四代SHARC® ADSP-21479KBCZ-2A、ADSP-21479BSWZ-2A、ADSP-21479KSWZ-2A高性能DSP（数字信号处理器）

第四代SHARC® ADSP-21479KBCZ-2A、ADSP-21479BSWZ-2A、ADSP-21479KSWZ-2A高性能DSP（数字信号处理器）

第四代SHARC Processors 现在内置低功耗浮点DSP产品&#xff08;ADSP-21478和ADSP-21479&#xff09;&#xff0c;可提供改进的性能、基于硬件的滤波器加速器、面向音频与应用的外设以及能够支持单芯片解决方案的新型存储器配置。所有器件都彼此引脚兼容&#xff0c;而且与以往…
阅读更多...
Appium+python自动化（二十二）- 控件坐标获取（超详解）

Appium+python自动化（二十二）- 控件坐标获取（超详解）

简介 有些小伙伴或者是童鞋可能会好奇会问上一篇中的那个monkey脚本里的坐标点是如何获取的&#xff0c;不是自己随便蒙的猜的&#xff0c;或者是自己用目光或者是尺子量出来的吧&#xff0c;答案当然是&#xff1a;NO。获取控件坐标点的方式这里宏哥给小伙伴们分享和讲解三种方…
阅读更多...
2024届IC秋招兆易创新数字IC后端笔试面试题

2024届IC秋招兆易创新数字IC后端笔试面试题

数字IC后端实现PR阶段设计导入需要哪些文件&#xff1f; 设计导入需要的文件如下图所示。这个必须熟练掌握。只要做过后端训练营项目的&#xff0c;对这个肯定是比较熟悉的。大家还要知道每个input文件的作用是什么。 在吾爱IC后端训练营Cortexa7core项目中&#xff0c;你认为…
阅读更多...
Jmeter接口自动化生成测试报告html格式

Jmeter接口自动化生成测试报告html格式

jmeter自带执行结果查看的插件&#xff0c;但是需要在jmeter工具中才能查看&#xff0c;如果要向领导提交测试结果&#xff0c;不够方便直观。 笔者刚做了这方面的尝试&#xff0c;总结出来分享给大家。 这里需要用到ant来执行测试用例并生成HTML格式测试报告。 一、ant下载安…
阅读更多...
整数0 强制转化为指针

整数0 强制转化为指针

整数0强制转化为指针的巧用 在工程中看到以下代码&#xff1a; #define my_container_of(ptr,type,member) \ ((type*)((char *) (ptr) - (unsigned long)(&((type*)0)->member))) ->的优先级高于&。 因此 &((type*)0)->member)的解…
阅读更多...
微信小程序quickstartFunctions中云函数的应用

微信小程序quickstartFunctions中云函数的应用

1、在quickstartFunctions文件中新建文件夹和文件 2、index.js 文件书写 const cloud require(wx-server-sdk);cloud.init({env: cloud.DYNAMIC_CURRENT_ENV }); const db cloud.database();// 链表查询试卷和对应的题库 exports.main async (event, context) > {retu…
阅读更多...
Terraform学习日记-AWS-EC2

Terraform学习日记-AWS-EC2

terraform install https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli 这里我们使用 aws-linux-2022 作为执行环境 # sudo yum install -y yum-utils# sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/AmazonLinux/…
阅读更多...
Linux内核中的链表、红黑树和KFIFO

Linux内核中的链表、红黑树和KFIFO

lLinux内核代码中广泛使用了链表、红黑树和KFIFO。 一、 链表 linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。链表的每个元素都是离散存放的&#xff0c;因此不需要占用连…
阅读更多...
VBA技术资料MF35：VBA_在Excel中过滤数据

VBA技术资料MF35：VBA_在Excel中过滤数据

【分享成果&#xff0c;随喜正能量】好马好在腿&#xff0c;好人好在嘴。不会烧香得罪神&#xff0c;不会讲话得罪人。慢慢的你就会发现&#xff0c;一颗好心&#xff0c;永远比不上一张好嘴。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#…
阅读更多...
Spring 6【方法参数校验、SpingAOP介绍、Schema-based方式实现AOP 】(十四)-全面详解（学习总结---从入门到深化）

Spring 6【方法参数校验、SpingAOP介绍、Schema-based方式实现AOP 】(十四)-全面详解（学习总结---从入门到深化）

目录 4.方法参数校验 SpingAOP介绍 Schema-based方式实现AOP 4.方法参数校验 Spring框架提供了一种校验方法参数的方法&#xff0c;在调用一个方法传入参数后&#xff0c;会判断参数是否满足数据校验。如果满足方法执行&#xff0c;如果不满足&#xff1a;不执行方法&…
阅读更多...
使用开源免费AI绘图工具神器-Stable Diffusion懒人整合包

使用开源免费AI绘图工具神器-Stable Diffusion懒人整合包

使用开源免费AI绘图工具神器-Stable Diffusion懒人整合包 Stable Diffusion 是什么 Stable Diffusion (简称 SD) 是一款开源免费的以文生图的 AI 扩散模型&#xff0c;它和付费的 Midjourney 被人称为当下最好用的 AI 绘画工具。你在网上看到的绝大多数优秀 AI 图片作品&…
阅读更多...
ROS 基础知识汇总

ROS 基础知识汇总

How to learn ROS ROS for Beginners: How to Learn ROS - The Construct ROSwiki 界面介绍 ROS/Tutorials/NavigatingTheWiki - ROS Wiki ROS要学会哪些&#xff1f;如何学习Ros&#xff1f; - 知乎 setup.bash 的作用 ROS中的setup.bash_泠山的博客-CSDN博客 包的层级架构 …
阅读更多...
详细介绍 React 中如何使用 redux

详细介绍 React 中如何使用 redux

在使用之前要先了解它的配套插件&#xff1a; 在React中使用redux&#xff0c;官方要求安装其他插件 Redux Toolkit 和 react-redux Redux Toolkit&#xff1a;它是一个官方推荐的工具集&#xff0c;旨在简化 Redux 的使用和管理。Redux Toolkit 提供了一些提高开发效率的工具…
阅读更多...
MybatisPlus拓展篇

MybatisPlus拓展篇

文章目录 逻辑删除通用枚举字段类型处理器自动填充功能防全表更新与删除插件MybatisX快速开发插件插件安装逆向工程常见需求代码生成 乐观锁问题引入乐观锁的使用效果测试 代码生成器执行SQL分析打印多数据源 逻辑删除 逻辑删除的操作就是增加一个字段表示这个数据的状态&…
阅读更多...
用JavaScript和HTML实现一个精美的计算器

用JavaScript和HTML实现一个精美的计算器

文章目录 一、前言二、技术栈三、功能实现3.1 引入样式3.2 编写显示页面3.2 美化计算器页面3.3 实现计算器逻辑 四、总结 一、前言 计算器是我们日常生活中经常使用的工具之一&#xff0c;可以帮助我们进行简单的数学运算。在本博文中&#xff0c;我将使用JavaScript编写一个漂…
阅读更多...
剑指 Offer 26. 树的子结构

剑指 Offer 26. 树的子结构

思路&#xff1a; 先统计B数的非空节点数countB。然后前序遍历A&#xff0c;当遇到A的值和B的第一个值相等时&#xff0c;则进行统计左右结构和值都相等的节点数和sum&#xff0c;如果sum countB&#xff0c;则true。 /*** Definition for a binary tree node.* public class…
阅读更多...
android framework车载桌面CarLauncher的TaskView详细源码分析

android framework车载桌面CarLauncher的TaskView详细源码分析

1、构建相关的TaskView&#xff0c;装载到对应的ViewGroup b站免费视频教程讲解&#xff1a; https://www.bilibili.com/video/BV1wj411o7A9/ //packages/apps/Car/Launcher/src/com/android/car/carlauncher/CarLauncher.java void onCreate() { //ignoresetContentView(R.…
阅读更多...
macos下安装john the ripper并配置zip2john+破解加密zip文件

macos下安装john the ripper并配置zip2john+破解加密zip文件

为了破解加密的zip文件&#xff0c;需要用到john进行爆破密码。 1、首先使用homebrew安装john&#xff0c;可以安装它的增强版john-jumbo: brew install john-jumbo 2、安装后可以使用 john 命令验证&#xff1a; john 3、配置zip2john的环境——.zshrc下&#xff0c;&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023