vue i18n 国际化不能即时刷新(无法在data中正常使用)
父页面:data() {return {breadcrumb: {data: [{label: this.$t(`message.login`),path: '/'},{label: this.$t(`message.menu.${this.$route.meta.localekey}`)}]
·
父页面:
data() {
return {
breadcrumb: {
data: [{
label: this.$t(`message.login`),
path: '/'
},
{
label: this.$t(`message.menu.${this.$route.meta.localekey}`)
}
]
},
}
},
子组件页面:
<template>
<div>
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item v-for="(item,index) in breadcrumb.data" :key="index" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: ['breadcrumb']
}
</script>
<style>
.bread {
margin: 20px 10px;
}
</style>
这样写国际化不能立即刷新,解决方法如下:
方法一:
父页面:
data() {
return {
breadcrumb: {
data: [{
label: `message.login`,
path: '/'
},
{
label: `message.menu.${this.$route.meta.localekey}`
}
]
},
}
},
子组件页面:
<template>
<div>
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item v-for="(item,index) in breadcrumb.data" :key="index" :to="{ path: item.path }">{{$t(item.label)}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: ['breadcrumb']
}
</script>
<style>
.bread {
margin: 20px 10px;
}
</style>
方法二:
父页面:
computed: {
breadcrumb() {
return [{
label: this.$t(`message.login`),
path: '/'
},
{
label: this.$t(`message.menu.${this.$route.meta.localekey}`)
}
]
}
},
子组件子页面:
<template>
<div>
<el-breadcrumb separator="/" class="bread">
<el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: ['breadcrumb']
}
</script>
<style>
.bread {
margin: 20px 10px;
}
</style>
(项目中使用computed方法)
更多推荐
已为社区贡献1条内容
所有评论(0)