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

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

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

const mixin = {
updated(){

}
}

var vue = new Vue({
    el:'#app',
    data:{},
    mixins:[mixin],
})
阅读 363
评论
    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,
      ...
    }
    评论 赞赏
      木木
      • 2
      • 新人请关照

      个人感觉,利用组件生命周期的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>

        评论 赞赏
          撰写回答

          登录后参与交流、获取后续更新提醒