在nuxtjs中自定义路由元信息

孙泽辉

发布于：2022年3月8日

字数：234字

时长：1分钟

次浏览

Nuxtjs 几乎将常用的配置都自动化了，用起来是相当舒服！

需求

layout 布局路由下面的page 单页中有些页面需要修改整体布局样式，例如切换暗黑模式之类的，我这是公司的项目就不拿出来了。

操作

# 安装 nuxt-route-meta
yarn add nuxt-route-meta

然后在 nuxt.config.js 中添加

export default {
  // ...
  
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ['nuxt-route-meta'],
}

然后在 需要自定义样式的路由 中的 script 标签中添加

<script>
export default {
    name: 'community',
    layouts: "default",
		// 重点 👇🏻
  	headTheme: "white",
    data() {
        return {}
    },
}
</script>

随便加什么，反正加了之后在 this.$route 中的 meta 属性中可以看见

加过之后重启服务

在 layout.vue 中监听路由切换，适当捕捉 meta 信息

watch: {
    '$route': function (to) {
      	// 当前路由的 meta 信息 { headTheme: white, ... }
        const toRouteMeta = to.meta
        this.headStyle = toRouteMeta?.headTheme || 'default';
    }
},