记录vue的一些踩坑日记

news2024/9/27 12:11:59

记录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 out
        this.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，默认是true
  publicPath: './',//因为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.coloradmin.cn/o/809252.html

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

相关文章

Docker安装 Mysql 8.x 版本

Docker安装 Mysql 8.x 版本

文章目录 Docker安装 Mysql 8.0.22Mysql 创建账号并授权Mysql 数据迁移同版本数据迁移跨版本数据迁移 Mysql 5.x 版本与 Mysql 8.x版本是两个大版本&#xff0c;这里演示安装Mysql 8.x版本 Docker安装 Mysql 8.0.22 # 下载mysql $ docker pull mysql 默认安装最新…
阅读更多...
SolidWorks(1)

SolidWorks(1)

打开solidworks,选择零件选择草图、绘制草图选择上视基准面 最后完成草图 选择拉伸切除 最终成品 鼠标按住中键&#xff0c;进行旋转
阅读更多...
优思学院：六西格玛的10大概念和特点

优思学院：六西格玛的10大概念和特点

六西格玛是一种管理方法&#xff0c;致力于提高组织的运营效率和质量水平。它起源于20世纪80年代的美国&#xff0c;随后在全球范围内得到广泛应用。今天我们将探讨六西格玛的十大概念和特点&#xff0c;帮助您了解如何将这一管理方法应用于您的业务中。 1. 什么是六西格玛&am…
阅读更多...
【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

React 基础巩固(三十七)——自定义connect高阶组件 一、手撸一个自定义connect高阶组件 import { PureComponent } from "react"; import store from "../store";/*** connect的参数&#xff1a;* 参数一&#xff1a; 函数* 参数二&#xff1a; 函数* 返…
阅读更多...
TiProxy 尝鲜

TiProxy 尝鲜

说明 最近发现 tidb 有个 GitHub - pingcap/TiProxy 仓库&#xff0c;抱着好奇的心态想试试这个组件的使用效果。于是按照文档的介绍在本地环境使用tiup做了一些实验&#xff0c;现在将实验过程和实验结果分享给大家。 TiProxy介绍 官方README介绍的已经很清楚了&#xff0c;…
阅读更多...
QT 调用USB免驱摄像头

QT 调用USB免驱摄像头

文章目录 前言一、界面布局二、QImageEncoderSettings类三、图像的显示总结 前言 本篇文章来讲解一下如何使用QT调用摄像头&#xff0c;这里我使用的是USB免驱动摄像头&#xff0c;使用不需要按照驱动QT就可以调用到摄像头。 一、界面布局 这里使用QT设计师进行界面的布局&a…
阅读更多...
数据结构：树的存储结构

数据结构：树的存储结构

学习树之前&#xff0c;我们已经了解了二叉树的顺序存储和链式存储&#xff0c;哪么我们如何来存储普通型的树结构的数据&#xff1f;如下图1&#xff1a; 如图1所示&#xff0c;这是一颗普通的树&#xff0c;我们要如何来存储呢&#xff1f;通常&#xff0c;存储这种树结构的数…
阅读更多...
vmware磁盘组使用率100%处理

vmware磁盘组使用率100%处理

今天在外办事时&#xff0c;有客户发过来一个截图&#xff0c;问vmware 磁盘组空间使用率100%咋办&#xff1f;如下图&#xff1a; 直接回复&#xff1a; 1、首先删除iso文件等 2、若不存在ISO文件等&#xff0c;找个最不重要的虚拟机直接删除&#xff0c;删除后稍等就会释放…
阅读更多...
数据分析-关于指标和指标体系

数据分析-关于指标和指标体系

一、电商指标体系 二、指标体系的作用 三、统计学中基本的分析手段
阅读更多...
记一次解决FTPS上传的文件为空的问题

记一次解决FTPS上传的文件为空的问题

最近公司的vsftpd文件服务由之前的FTP传输改成了FTPS的&#xff0c;虽然代码做了相应的调整&#xff0c;但是始终有个问题&#xff0c;就是在服务器上文件创建成功了&#xff0c;名称也是正确的&#xff0c;可是一看大小确是0&#xff0c;于是查看日志 用项目上传的始终是失败&…
阅读更多...
mybatis-config.xml-配置文件详解

mybatis-config.xml-配置文件详解

文章目录 mybatis-config.xml-配置文件详解说明文档地址:配置文件属性解析properties 属性应用实例 settings 全局参数定义应用实例 typeAliases 别名处理器举例说明 typeHandlers 类型处理器environments 环境environment 属性应用实例 mappers配置 mybatis-config.xml-配置文…
阅读更多...
vue除了子组件抛出的额外参数,父组件如何传递额外参数

vue除了子组件抛出的额外参数,父组件如何传递额外参数

以下为一个简单的demo,只为记录一下 很多时候如果我们多个地方使用同一函数时,往往就需要进行判断了,但是组件库返回的函数携带的参数没办法让我们做多余的判断 这时就需要传递多余的参数了 方法一 使用箭头函数 <template><div><el-switchv-model"value&…
阅读更多...
2023年中秋节国庆节是几月几号开始休假国庆中秋双节放假几天？

2023年中秋节国庆节是几月几号开始休假国庆中秋双节放假几天？

2023年中秋节国庆节是几月几号开始休假国庆中秋双节放假几天&#xff1f; 2023年中秋节与国庆节双节相遇一起放假长大8天; 2023年中秋节与国庆节放假时间是从2023年9月29日开始至10月6日共计8天&#xff0c;10月7日、10月8日补班&#xff1b; 2023年中秋节怎么购买月饼省钱又…
阅读更多...
Jenkins配置自动化构建的几个问题

Jenkins配置自动化构建的几个问题

在创建构建任务时&#xff0c;填写git远程仓库地址时&#xff0c;出现以下报错 解决此报错先排查一下linux机器上的git版本 git --version 如果git 版本过低&#xff0c;可能会导致拉取失败&#xff0c;此时需要下载更高的git版本。 参考 Git安装 第二个解决办法报错信息中…
阅读更多...
Ansible的脚本 --- playbook 剧本

Ansible的脚本 --- playbook 剧本

文章目录 一、playbook剧本的组成创建剧本运行playbook二、定义、引用变量三、指定远程主机sudo切换用户四、when条件判断五、迭代Templates 模块tags 模块 一、playbook剧本的组成 playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0…
阅读更多...
SpringCloudAlibaba之整合openFeign

SpringCloudAlibaba之整合openFeign

一.openFeign的入门使用&#xff08;4步&#xff09; 1.引入openFeign的依赖包&#xff0c;记得父项目中要加上SpringCloud依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactI…
阅读更多...
VSCode新手快速下载、安装、使用

VSCode新手快速下载、安装、使用

目录 下载 安装 1、许可协议 2、安装位置 3、开始菜单文件夹 4、附加任务 5、确认安装 6、完成 使用 1、汉化&#xff08;设置中文界面&#xff09; 2、设置 下载 进入VSCode官方页面&#xff0c;选择自己系统对应的下载链接VSCode默认提供的User Installer版本。但…
阅读更多...
【解决】el-tree报Cannot read property ‘getCheckedKeys‘ of undefined

【解决】el-tree报Cannot read property ‘getCheckedKeys‘ of undefined

如果你报错 Cannot read property getCheckedKeys of undefined 或者 Cannot read property getCheckedNodes of undefined 只要在你的在<el-tree>上加个这个&#xff0c;就可以了 ref"tree"
阅读更多...
某圆形变电站三维建模模型-glb格式-三维漫游-三维可视化-三维模拟巡检

某圆形变电站三维建模模型-glb格式-三维漫游-三维可视化-三维模拟巡检

资源介绍 某个圆形变电站的三维建模模型&#xff0c;glb格式&#xff0c;适用于three.js开发测试&#xff0c;可用来做一些三维室内漫游测试、室内导航测试和三维模拟巡检测试 资源下载地址
阅读更多...
联想拯救者笔记本切换独显直连游戏体验翻倍、火力全开“嗨”起来

联想拯救者笔记本切换独显直连游戏体验翻倍、火力全开“嗨”起来

最早的游戏本是由独显负责图形运算&#xff0c;然后直接向屏幕输出所有画面的。但独显负责所有工作&#xff0c;无时无刻都在耗电&#xff1b;撇开游戏模式下高负载的功耗不谈&#xff0c;即便在省电模式下功耗也比核显高得多。 英伟达发布的Optimus混合输出技术&#xff0c;在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023