精华内容
下载资源
问答
  • 保存页面的数据,页面显示就执行某个函数,页面隐藏就执行某个函数实现方式: 1.在路由内设置页面是否需要缓存; 示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive的值为是否需要缓存组件) ...

    用 VUE 默认的 keep-alive 组件实现

    保存页面的数据,页面显示就执行某个函数,页面隐藏就执行某个函数实现方式:

    1.在路由内设置页面是否需要缓存;

    示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive 的值为是否需要缓存组件)

        {
          path:'/UpInfo',
          name:'UpInfo',
          component:UpInfo,
          meta:{
            keepAlive:true
          }


    2.在 app.vue 里面使用 router-view 组件;

    在 APP.vue 里面 使用 keep-alive 把 router-view 包裹起来,并且判断是否在路由里面设置的是否需要缓存。

    <template>
      <div id="app">
        <keep-alive>
          <router-view v-if='$route.meta.keepAlive'/>
        </keep-alive>
          <router-view v-if='!$route.meta.keepAlive'/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {},
        mounted() {
        }
      }
    </script>
    <style scoped />

    3.页面显示就执行某个函数,页面隐藏就执行某个函数    ------ 前提是在app.vue里面用 keep-alive 组件并且路由l里面的keepAlive 为true(如上一段代码)。

    //info.vue
    <template>
      <div id="info">
        我的info页面
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {},
        activated() {
          console.log('我这个页面显示就会执行');
        },
        deactivated: function () {
          console.log('我这个页面退出的会执行');
        },
        mounted() {
        }
      }
    </script>
    <style scoped />

     

     

    展开全文
  • linux程序调试常用命令 1 调用跟踪 跟踪系统调用 strace ls –l 跟踪库调用 ltrace 2 lsof(list open file) 查看程序命令打开了哪些文件 lsof –p PID; lsof –c ... 坦言spring中事务、重试、异步执行注解 一.@...

    设计模式之接口隔离原则(ISP)

    一.定义: ISP:Interface Segregation Principle 接口隔离原则表明客户端不应该被强迫实现一些他们不会使用的接口,应该把胖接口中的方法分组,然后用多个接口代替它,每个接 ...

    JS字符串与汉字的字节获取

    JS英文为一个字节,中文GBK为3个字节,UTF-8为2个字节. 1.通过for循环 function getStrLeng(str){ var realLength = 0; var len = s ...

    linux程序调试常用命令

    1 调用跟踪 跟踪系统调用 strace ls –l 跟踪库调用  ltrace 2 lsof(list open file) 查看程序命令打开了哪些文件  lsof –p PID; lsof –c ...

    坦言spring中事务、重试、异步执行注解

    一.@Transaction 我们再编码过程中,大量使用到这个注解.一般情况下,@Transaction使用默认注解可以完成90%的功能,下面会针对一些特殊场景下,@Tansaction的使用注意 1 ...

    1&period;10 tuple 元组

    元组(tuple)属于不可变序列 tuple特性: 特性一:可包含任意对象的有序集合 特性二:通过下标索引访问元素 特性三:固定长度,异质,可任意嵌套 特性四:不支持原位改变 特性五:存储机制:对象引 ...

    Ocelot中文文档-缓存

    目前Ocelot使用CacheManager项目提供了一些非常基本的缓存.这是一个了不起的项目,它解决了很多缓存问题. 我会推荐这个软件包来做Ocelot缓存. 如果你看看这里的例子,你可以看到如何设 ...

    webpack报错运行时没有定义

    一.问题描述 ReferenceError: regeneratorRuntime is not defined 二.问题分析 缺少regenerator的运行时库,具体原理,可查看babel文章. ...

    Xcode10 libstdc&plus;&plus;&period;6&period;0&period;9&period;tbd移除引起的错误

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/u ...

    C&plus;&plus;编译与链接(0)-&period;h与&period;cpp中的定义与声明

    C++中有的东西需要放在可以在.h文件中定义,有的东西则必须放在.cpp文件中定义,有的东西在不同的cpp文件中的名字可以一样,而有的则不能一样 那么究竟哪些东西可在头文件中定义,声明,哪些东西又必须 ...

    sql 存储过程返回值 变量名

    return 语句返回值,前台调用的参数名称为 @RETURN_VALUE

    展开全文
  • vue打开其他项目页面,并传入数据

    千次阅读 热门讨论 2020-11-17 17:44:56
    如何打开其他系统,并传入数据 vue项目中如何嵌入其它项目的页面 1.携带sessionstorage打开页面; 2.iframe通信

    1.不跨域,携带sessionstorage打开

    主页面,存储sessionstorage后,打开页面

    let data = {
    	text:'我是数据'
    };
    let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)?true:false;
    
    sessionStorage.setItem('information',JSON.stringify(data));
    //ios不能打开新窗口,所以改为移动端在原本页面打开,pc打开新窗口
    window.open(window.location.protocol + "//" + window.location.host + reportUrl, isMobile?'_self':'_blank');
    

    子页面

    var date = JSON.parse(sessionStorage.getItem('information'));
    

    2.跨域,iframe通信

    跨域的情况下,无法携带sessionstorage,通过iframe的postMessage通信机制传递数据;
    不跨域也可以用,但更建议使用第一种,比较丝滑~

    主页面,写入url,加载完成后,发送数据

    <iframe id='iframe' class="iframe" v-if="src" ref="iframe" :src="src"></iframe>
    
    let data = {
    	text:'我是数据'
    };
    this.src = url
    this.$nextTick(()=>{
    	document.getElementById('iframe').onload=()=>{
    		document.getElementById('iframe').contentWindow.postMessage({
    			type:'preview',
    			data:data
    		},this.src)
    		document.getElementById('iframe').onload=null;
        }
    })
    

    子页面,执行监听,created、mounted都可以

    created() {
    	window.addEventListener('message',(event)=>{
    	      console.log(event.data.type)
    	      if(event.data&&event.data.type=='preview'){
    	            console.log(event.data.data)
    	            let data = event.data.data
    	      }
    	 }, false);
    }
    
    展开全文
  • 安装完vue-cli以后执行npm run dev后出现这个: 我们只需要在config/index.js里面把autoOpenBrowser:false;改为true就行了!

    安装完vue-cli以后执行npm run dev后出现这个:

    在这里插入图片描述

    我们只需要在config/index.js里面把autoOpenBrowser:false;改为true就行了!

    在这里插入图片描述

    展开全文
  • vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue 请求后台数据需要引用vue-resource安装请参考...
  • 安装完vue-cli以后执行npm run dev后出现这个: 我们只需要在config/index.js里面把autoOpenBrowser:false;改为true就行了!
  • 为了用页面创建项目执行 //卸载vue 客户端 npm uninstall vue-cli -g //安装vue客户端最新 npm install -g @vue/cli 执行vue ui报错 � Starting GUI... ERROR Error: Vue packages version mismatch: - vue@...
  • vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync=paramAddDialog v-if=paramAddDialog 整体代码: 绑定其他更多的账户 width=1200px align=center visible.sync=...
  • 主要介绍了vue 页面回退mounted函数不执行的解决方案 ,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2019-06-08 10:54:18
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...
  • 一个vue页面打开执行完毕用到的生命周期执行顺序 beforRouteEnter beforeCreate created beforeMount mounted 假设页面中有个按钮点击,可以触发修改页面中某个data中,点击这个按钮后将顺序执行以下生命...
  • 主要介绍了详解Vue.js在页面加载时执行某个方法的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android...判断是否是微信打开页面
  • 今天帮忙解决问题的时候遇到了一个很奇怪的问题,点击一个按钮跳转的另一个页面,他的mounted方法执行了三遍,想到这个问题我确实是很困惑的,查阅网络资料说是v-if和v-show的问题,线下我自己验证了一下,确实没有...
  • 解决 页面刷新 刚打开时 闪烁问题 问题原因: 代码执行顺序从上往下,在 vue实例还未创建,vue还没有作用html上,此时我们模板 只是单纯字符串 实例作用到html,模板开始解析 style [v-cloak]{ display:none; } ...
  • 场景Vue的项目执行npm run build后会在本地dist下生成打包后的文件但是此文件给后端后就能访问,如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。这是因为直接在本地访问打开的话,请求资源的url是...
  • //info.vue <template> <div id="info"> 我的info页面 </div> </template> <script> export default { data() { return { } }, methods: {}, act...
  • step 1:我们要用到 vue-titles这个第三方插件 npm install vue-titles --save step2:在main.js中引入 Vue.use(require('vue-titles')); step3:app.vue根目录添加属性 <router-view v-title="$route.meta....
  • 我想要跳转一个页面,并且想要在跳转后都执行某方法;咱们也都知道要使用created方法的话,只有创建时好使,后面就不会执行created方法了 可能是我比较笨试了几种方法,在 携手天下 的帮助下才解决 此问题解决方案: ...
  • 全局定义一个自定义事件: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"...https://unpkg.com/vue/di
  • vue 浏览器页面刷新

    千次阅读 2018-11-15 15:42:27
    当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面) 纯js的是window.onload() 但是vue几乎不会用到这个,vue所有的是生命周期 那么我们可以根据生命周期来实现这个 beforeCreate(),created(), beforeMount...
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同...
  • vue2 中 执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyed vue3 中 执行顺序 setup=>onBeforeMount=>onMounted=>...
  • 前几天在项目中遇到一个需求,要在离开页面后掩藏某一个按钮,因为之前在开发小程序时,有离开页面的生命周期,所以Vue应该也有这个的。 进入路由页面: mounted(){ this.$nextTick(()=>{ show(); }) }...
  • Vue3 安装与执行过程

    2020-12-09 08:30:00
    安装初次使用 Vue 的时候,无论是新项目还还是老项目,首先需要安装。安装 Vue 和安装其它 npm 包一样。下面我列举 4 种方式来安装 Vue。直接使用 CDN 地址这种方式直接在...
  • 点击vue页面链接打开本地exe文件

    千次阅读 2019-09-25 16:43:26
    后来想一个折中的办法,点击菜单出一个带链接的页面(会提示将打开本地某exe应用),然后再点击此链接就直接打开了这个exe应用。勉勉强强应该是可以交付。 思路:在web网页中调用本地应用程序的思路...
  • vue- cli子组件向父页面执行操作

    千次阅读 2018-11-17 09:46:49
    在项目中经常会用到vue子组件向父页面执行操作的情况,今天就写一个选择弹框组件对父页面的一些操作方法 1.在子组件中添加事件 &lt;ul&gt; &lt;li v-for="(item,index) in paydata" @...
  • vue定时任务执行接口

    2021-07-01 16:24:33
    记录打开弹框进行定时接口调用,进行数据刷新,关闭弹框停止定时任务调用接口 methods:{} 定义函数方法 watch:{} 监视数据变化 代码实现 vue: <el-button type="text" @click="setTime()">点击查看实时...
  • 打开IDEA,在idea左下角找到Terminal命令行工具执行npm install -g vue-cli安装全局的vue脚手架3.Fil上发开间人会一控近班从发也通和款制近班从e→Settings→Plugins在Plugins中输入vue找到vue.js在Browse ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,760
精华内容 10,704
关键字:

vue打开页面执行

vue 订阅