首页 > 其他分享 >【vue3】【router】跳转页面渲染两次问题

【vue3】【router】跳转页面渲染两次问题

时间:2024-02-25 15:00:10浏览次数:21  
标签:vue default App 跳转 vue3 组件 router keepalive

最近做一款毕设遇到一个问题:如图所示部分是因为渲染了两次组件导致执行了两次onMounted加载了相同数据。

 router.ts 以下是我的路由相关配置:

 default布局:keepalive

 App.vue

 最后导致这个原因正是因为布局组件default.vue和App.vue同时使用了keepalive,只要任意一边取消即可。
注意:取消default的keepalive意味着子组件不能被keepalive,所以这里把App.vue的keepalive关了,因为布局不需要被缓存。

标签:vue,default,App,跳转,vue3,组件,router,keepalive
From: https://www.cnblogs.com/gouziweisuidanerfei/p/18032420

相关文章

  • linux跳转到文件指定行
    在日常编程过程中,我们经常需要在一个比较大的文件中定位到某一行进行修改或查看。在Linux系统中,有很多种方法可以实现这个操作,例如使用文本编辑器、grep命令等。本文将从多个角度分析如何在Linux中跳转到文件指定行。一、使用vim编辑器 vim是Linux系统中一个非常常用的文本编......
  • Vue3音乐播放器组件,可显示歌词
    在线体验地址音乐播放器1,安装npminstallapple-music-player或yarnaddapple-music-player2,在main.ts中引入import{createApp}from'vue'importAppfrom'./App.vue'importAppleMusicPlayerfrom'apple-music-player'createApp(App).use(......
  • vue3+elementplus+table动态列
    思路1.colsArr,用来渲染列表。dataList,用来渲染行数据2.循环colsArr,生成el-table-column3.数据格式如下colsArr:[{colName:'排名',key:'cols0'},{colName:'区域',key:'cols1'},{colName:&#......
  • vue3 使用 html5-qrcode 实现扫描二维码功能
    1.安装npm安装npminstall--save-devhtml5-qrcode或直接引入<scriptsrc="https://unpkg.com/html5-qrcode"type="text/javascript">2.引入根据需求自定义渲染QRscanningUI的容器。<divid="reader"width="600px"></div&......
  • vue3 ref 获取单个Dom及多个Dom
    获取单个Dom<inputtype="text"ref="inputRef"/>setup(){constinputRef=ref(null)onMounted(()=>{console.log(inputRef.value);})}获取多个Dom<divv-for="(item,index)instate.list":key=&quo......
  • vue3+vite 移动端适配postcss-pxtorem插件
    1、安装插件npmipostcss-pxtorem-D2、与package.json同级目录创建postcss.config.js文件module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1",......
  • 微信里打开的h5项目,实现h5跳转至微信关注公众号页面
    实现功能:在微信里打开的h5项目,想要引流去关注微信公众号。实现思路:通过公众号关注链接,跳转至公众号关注页面。实现步骤:关注公众号的链接:https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyOTQ5ODI1NA==#wechat_redirect把链接中的蓝色字体部分替换为自己的公众......
  • Web应用_6. Vue3
    title:(在线学习平台)link:(https://www.acwing.com/)cover:(https://cdn.acwing.com/media/activity/surface/log.png)Vue官网1配置环境1.1终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。1.2安装Nodejs安装地址1......
  • vue3+elment-plus项目,el-diglog的按钮,内部是el-form的子组件,那么保存时,如何触发子组件
    问题:el-diglog的按钮,如何触发内部的form表单提交el-dialog是父组件,cengji是子组件代码如下:<el-dialogv-model="dialogVisible"title="层级结构管理"width="1000"><cengji:tableId="tableId"/><template#footer>......
  • vue3 ts用正则表达式校验两位小数和校验整数的方法
    <el-col:span="12"><el-form-itemlabel="贷款金额"prop="loanAmount"><el-input-numberv-model="props.loanAmount":min="0"@change="checkIntegerNumber('loanAmount')"controls......