Vue.js vue路由器中未定义转换器

我已经花了好几个小时在一项相对简单的任务上。我想要实现的是为添加/编辑内容提供一个通用的模式窗口。模式窗口有几个选项卡，通过路由器控制。它在createstuff场景中运行得很好，但是当我试图统一表单进行编辑时，所有的错误都消失了，vue errors

TypeError:t未定义

一直在浮动。当我点击导航按钮时，URL也相应地改变了，但是模板没有响应并且“冻结”

我的设置：

<template id="main">
    <div id="modal" ref="modal">
        <span v-if="editMode">{{$t('something')}}</span>
        <span v-else>{{$t('something else')}}</span>
    </div>
</template>

<script>
    import VueRouter from 'vue-router';
    const router = new VueRouter({
        linkExactActiveClass: 'active',
        linkActiveClass: 'active',
        routes: [
            {
                name: "general",
                path: '/whatever/:id?/general',
                component: () => import('./tabs/GeneralTab.vue'),
                props: true,
                meta: {
                    showModal: true
                }
            },
            {
                name: "evaluation",
                path: '/whatever/:id?/evaluation',
                component: () => import('./tabs/EvaluationTab.vue'),
                props: true,
                meta: {
                    showModal: true
                }
            }];
    });

    export default {
        router,
        data() {
            showModal: this.$route.meta.showModal,
            editMode: false,
            id: this.$route.params.id
        },
        watch: {
            '$route.params.id': function (id) {
                this.id = id;
                this.editMode = this.assetId != null;
            },
        },
        mounted: {
            this.modal = this.$refs.modal;
        },
        methods: {
            open: function(id) {
                this.editMode = id != null;
                this.$router.push({ name: 'general', params: {'id': id} });
            },
            show: function() {
                $(this.modal).modal({
                    backdrop: false,
                    keyboard: false,
                });
            }
        }
    }
</script>

{{$t（'something'）}
{{$t（'something other'）}
从“vue路由器”导入VueRouter；
常量路由器=新的VueRouter({
linkExactActiveClass:“活动”，
linkActiveClass:'活动'，
路线：[
{
姓名：“将军”，
路径：'/whather/：id？/general'，
组件：（）=>导入（'./tabs/GeneralTab.vue'），
道具：没错，
元：{
showModal：对
}
},
{
名称：“评估”，
路径：'/whather/：id？/evaluation'，
组件：（）=>导入（'./tabs/EvaluationTab.vue'），
道具：没错，
元：{
showModal：对
}
}];
});
导出默认值{
路由器，
数据（）{
showModal:this.$route.meta.showModal，
编辑模式：false，
id:this.$route.params.id
},
观察：{
“$route.params.id”：函数（id）{
this.id=id；
this.editMode=this.assetId！=null；
},
},
安装：{
this.modal=this.$refs.modal；
},
方法：{
打开：功能（id）{
this.editMode=id！=null；
这个.$router.push（{name:'general'，params:{id'：id}}）；
},
show:function（）{
$（this.modal）.modal({
背景：错，
键盘：错，
});
}
}
}

通过调用

open（）

方法从外部加载整个过程。我知道它很脏，但它是一个遗留项目，它适用于创建新东西场景，我只想在那里添加编辑功能

无论如何，

t的控制台错误在vue路由器的某个深处是未定义的。根本原因是对
open（）
method的参数有一些依赖性-如果模板和
open（）
方法之间没有连接，那么它工作得很好（例如在创建场景中）。当我需要将某些内容传递到组件中并相应地升级模板时（例如，标题应为
编辑内容
，而不是
创建内容
），即，我根据传递给
open（）
函数的参数创建模板翻译的依赖项时，它会失败

如果我用一些静态字符串（例如
'foo'
或'
bar
'）替换翻译后的字符串，它就可以工作了

我怀疑这与生命周期有关，但即使在彻底搜索之后，我仍然没有找到根本原因。我试图从中学习，但徒劳无功，在
created（）
hook中预先翻译字符串并在模板中使用它们没有任何帮助

有人能把我引向正确的方向吗？非常感谢。
结帐