这个页面里主要是定义了公用header布局和footer布局。而中间的动态替换部分，用的。也就是我们在引入custom.vue公用布局的页面里，包裹的内容会自动替换部分。

接收动态从引入布局里传递过来的参数，我这里用的route.meta。但是注意，这里用的computed计算属性来存储和获取传递过来的参数。如果不是用计算属性，大家可以测试下，页面切换参数不会及时的获取到，只有手动刷新页面才会获取到传递的参数，所以这里要用computed计算属性来存储和获取传递过来的参数。

... ...
const route = useRoute();
// const activeIndex = ref("1");
const activeIndex = computed(() => {
  return route.meta.index + ''
})
... ...

紧接着我们看下首页index.vue是怎么引入公用布局custom.vue的，又是如何传递参数的。

const router = useRouter();
//这里的layout定义了NuxtLayout引入加载的公共布局文件
//index为我们要通过route.meta传递给公共布局文件的参数
definePageMeta({
  layout: 'custom',
  index: 1,
});
onMounted(() => {
});
function toAbout() {
  router.push("/about");
}


.mainContainer {
  width: 1224px;
  margin: 0 auto;
}
.btn_container {
  padding: 20px;
}

页面的template里写的都将会挂载替换到custom.vue里的里，这样就形成了外层顶部和底部都是固定的custom.vue里的公用布局内容，中间部分是我们index.vue的首页内容。

... ...
definePageMeta({
  layout: 'custom',
  index: 1,
});
... ...

我们是通过definePageMeta来设置NuxtLayout使用的哪个布局文件。要传递给公共布局文件的也可以在这里定义传递。

最后我们看下关于页面about.vue是如何写的，整体跟index.vue大同小异。

useHead({
    title: '关于页面',
    meta: [
        { name: 'description', content: 'My amazing site.' }
    ],
    bodyAttrs: {
        class: 'test'
    },
    script: [{ children: 'console.log('Hello world')' }]
})
definePageMeta({
  layout:'custom',
  index: 2,
});
onMounted(() => {
});


.mainContainer {
    display: block;
    width: 1224px;
    margin: 0 auto;
}

我们点击index.vue里的按钮跳转到about.vue页面。about.vue页面效果如下图所示：

只有中间部分是动态更换的，顶部和底部都是公用的custom.vue布局。

同时注意，这个首页和关于页面顶部公用菜单导航的选中项是在变化的，这是由于传递过来的参数index起了作用，已经生效。