首页 > 其他分享 >Vue项目中created生命周期重复执行

Vue项目中created生命周期重复执行

时间:2024-07-04 17:54:22浏览次数:22  
标签:生命周期 name created edit list Vue template import

路由切换跳转时,发现一个页面的接口和页面展示每次进入都会调用created。keep-alive缓存页面没有效果,代码如下

keep-alive页面

          <section class="app-main">
            <transition name="fade-transform" mode="out-in">
              <keep-alive :include="cachedViews">
                <router-view :key="this.$route.path" />
              </keep-alive>
            </transition>
          </section>
View Code

路由配置

{
          path: '/contract/template/list',
          name: 'contract_template_list',
          component: () => import('@/views/contract/template/list.vue'),
          meta:{
            title:"合同模板管理",
            component_name:'contract_template_list',
            requiresAuth:true
          }
        }
View Code

组件页面

import edit from './edit.vue';
  import {commonUse} from '@/utils/mixins/mixinsHelper.js';
  export default {
    mixins:[commonUse],
    data() {
      return {
        ...
      }
    },
    components: {
        edit
    },
    created(){
      this.getBillTypes()
    }
}
View Code

经排查,发现是组件的name没有,加上之后就正常了,另外要注意组件的name要和路由里的name一直

import edit from './edit.vue';
  import {commonUse} from '@/utils/mixins/mixinsHelper.js';
  export default {
    name:"contract_template_list",
    mixins:[commonUse],
    data() {
      return {
        ...
      }
    },
    components: {
        edit
    },
    created(){
      this.getBillTypes()
    }
}

 

标签:生命周期,name,created,edit,list,Vue,template,import
From: https://www.cnblogs.com/helloStone/p/18284333

相关文章

  • 让vue重新渲染
    目录问题重现解决方法项目地址问题重现<scroll-viewclass="right-scroll-view"scroll-y:style="{height:wh+'px'}":scroll-top="scrollTop">这段代码中,我想实现切换页面但是滚动条每次都会切换到顶部,在js代码中设置scrollTop值为0,但是发现不起作用问GPT发现是,如果scro......
  • Vue学习入门
    介绍        新手程序员一枚,渴望成为大神,来点关注来点赞,给我介绍几个大神也行,球球了。        主要记录自己的学习过程,将之前的笔记进行整理并分享一下,有错误请指出,谢谢各位大佬爷们的观看。        下面开始分享我的笔记VSCode插件AutoClose......
  • 基于Java+Vue的采购管理系统:采购过程合规高效(整套代码)
         前言:采购管理系统是一个综合性的管理平台,旨在提高采购过程的效率、透明度,并优化供应商管理。以下是对各个模块的详细解释:一、供应商准入供应商注册:供应商通过在线平台进行注册,填写基本信息和资质文件。资质审核:系统对供应商提交的资质文件进行自动或人工审核,确......
  • vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
    一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说,所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入......
  • vue3父组件 调用子组件 方法
    父组件:通过ref获取子组件实例<template><divstyle="text-align:center"><button@click="callChildMethod">点击获取子组件数据</button><div>获取到子组件的数据如下:<div>{{childData}}</div></div&......
  • 273:vue+openlayers 显示流动轨迹并计算航向
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第273个示例文章目录一......
  • Vue3 子【emit 】传父【监听】
    <!--父组件--><template><h1>IamParentComponent</h1><ChildComponent@child-click="zCf"/><h2>{{x}}</h2></template><scriptsetup>importChildComponentfrom'./ChildCom......
  • 前端-vue工程化-Pinia的使用
    先来看一下我们的文件夹吧:大多数vue3前端项目中都会有这样一个文件夹是用来存放全局变量的地方,用来做状态管理。我们项目中使用的状态管理工具其实就是Pinia,当然不是我推荐大家用的,这个有迹可循,因为Pinia是在Vue官网上被推荐的一种方式。下面截几张官网上的图片:然后给......
  • vue3 父组件【属性】传值给子组件【props】接收
     父组件文件:parentcomponent.vue子组件文件:childcomponent.vue传普通值传动态值传对象传数组<!--父组件--><template>   <h1>IamParentComponent</h1>   <ChildComponentmsg="nice"/>  </template><scriptsetup>   importC......
  • Vue.js 起步
     每个Vue应用都需要通过实例化Vue来实现。语法格式如下:varvm=newVue({//选项})接下来让我们通过实例来看下Vue构造器中需要哪些内容:实例<divid="vue_det"><h1>site:{{site}}</h1><h1>url:{{url}}</h1><h1>{{details()}}</h1>&l......