vue-router跳转如何在组件渲染后执行某个函数

如题采用vue-router实现点击导航,内容组件切换。切换后想要执行一个函数来对组件进行简繁转换,该在哪里执行简繁转换的函数

————————————
根据楼下回答:

const mixin = {
updated(){

}
}

var vue = new Vue({
    el:'#app',
    data:{},
    mixins:[mixin],
})
阅读 4k
3 个回答
    // 思路一 mixin
    const mixin = {
        methods: {
            // 转换函数
            transLan () { // ...}
        },
        mounted () {
            // 调用
            this.transLan()
        }
    }
    
    new Vue({
      // 组件混入
      mixins: [mixin],
      data: function () {
       
      },
      mounted () {
        // 先执行混入的对象 在执行自己的mounted
      }
    })
    
    // 当然也可以全局 混入 影响所有组件
    Vue.mixin(mixin)
// 思路二 extends
const CompA = { ... }

 
const CompB = {
    // 这里的CompA可以是一个对象 形式是 跟上面mixin 一样的格式
  extends: CompA,
  ...
}
新手上路,请多包涵

个人感觉,利用组件生命周期的mounted,在这个生命周期函数内执行

图片描述

感觉可以利用生命周期和es6 new Promise((resolve, reject) => {})的方法来异步执行你想要的方法,在一个方法执行完之后再执行

<template>
<section>

 <test1 ref="test1"></test1>

</section>
</template>

<script>
import test1 from './test'
export default {
name:"",
components: {

test1

},
props: {},
data() {

return {
  isTrue: false
};

},
mounted() {

this.isTrue = true;
this.fn1()
.then(res => {
  this.fn2();
})
.catch()

},
methods: {

fn1 () {
  return new Promise((resolve, reject) => {
    if (isTrue) {
      resolve('change');
    } else {
      reject('noChange');
    }
  });
},
fn2 () {
  this.$refs.test1.goChangeQieHuan();
}

}
};
</script>

<style lang="less" scoped>

</style>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题