如何解决将页面部分的一部分添加到nuxt的主版式中
我有如下的nuxt布局
<template>
<div id="app">
<div>
<div class="bg-dark d-block">
set content in page
</div>
<nuxt />
</div>
</div>
</template>
但现在我需要填写写set content in page
的部分以从页面组件导入。
我的意思是我喜欢将不同页面中的自定义组件导入到此部分
有可能还是有办法做到这一点?
解决方法
您可以使用商店数据执行此操作
在您的页面中:
this.$store.dispatch('changeLayoutComponent','componentName')
在您的nuxt布局中,使用此数据可在不同页面中显示不同的组件,您可以使用动态组件来实现此目的
=>在您的布局中
<template>
...
<component v-bind:is="currentTabComponent"></component>
...
</template>
<script>
export default {
data() {
return {
currentTabComponent: this.$store.state.componentName
}
},//watch store for changes
watch: {
"$store.state.componentName": function() {
this.currentTabComponent= this.$store.state.componentName
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。