Question

我有一个具有单页组件的SPA应用程序；我想根据我的路线名称为组件导入某些方法。如何在Vue中实现？像这样：

<template>
    <div>
        <div v-for="foo in customMethod()">{{foo.bar}}</div>
    </div>
</template>

<script>
export default {
    methods: {},

    mounted: function() {
        switch(this.$route.name) {
            case "route.name":
                this.methods = require('./external-script.js');
                break;
            case "another.route.name":
                this.methods = require('./another-external-script.js');
                break;
        }
    }
}

</script>

Answer 1

此描述似乎是一个策略设计模式可以解决的问题，因为根据路由名称需要一种不同的行为。看看这个post。如果不是您的意图，则可以尝试Vue dynamic components。

Answer 2

如丹在评论中所述，这是不可能的。因此，我采用了Evandro建议的策略模式概念。安装组件时，我将根据路由名称导入外部文件。

<template>
    <div>
        <div v-for="foo in method1()">{{foo.bar}}</div>
    </div>
</template>

<script>
export default {
    data: function() {
        m: {},
        // ..
    },

    methods: {
        method1: function(params) {
            return m.method1(params)
        },

        method2: async function(params){
            return await m.method2(params, this.another_param);
        },

        // ...
    },

    mounted: function() {
        switch(this.$route.name) {
            case "route.name":
                this.m = require('./external-script.js');
                break;
            case "another.route.name":
                this.m = require('./another-external-script.js');
                break;
        }
    }
}

</script>

请注意，取决于组件的安装方式，基于mounted()中路由的脚本可能并不总是有效。

VueJS：动态设置组件的方法

2 个答案: