使用这个操作的主要原因是首页和常用页面切换的时候,浏览器不用加载了。主要应用于有页面切换动画的场景,比如小程序、公众号、二维码海报、首页大屏等。
Vue可以将模板文件和内容文件分开,然后使用标签套接的方式直接引用。
注意插入点:
<tab1></tab1>
import tab1 from './tabs/tab1'
export default {
components: {
tab1,
},
}
更改这三处即可插入tabs/tab.vue
文件了
示例:
(在AntDesignVue中的tab标签中引入tabs/tab1.vue文件)
主文件代码:
<template>
<div>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="测试1">
随便的内容
</a-tab-pane>
<a-tab-pane key="2" tab="测试">
<tab1></tab1>
</a-tab-pane>
</a-tabs>
</div>
<script>
import tab1 from './tabs/tab1'
export default {
components: {
tab1,
},
}
而tab1.vue则随意写即可
<template>
<div>111
</div>
</template>
<script>
export default {
name: "tab1"
}
</script>
<style scoped>
</style>
实际效果