如何在 Nuxt 中获取 Vue Router 的 meta

3 min read

最近在一个 Nuxt 项目中遇到需要给路由添加自定义 meta 用来判断菜单路由匹配,在非 Nuxt 项目中我们可以直接在 Vue Router 的配置文件里定义就行。但是我们都知道 Nuxt 是基于 pages 目录下自动生成页面路由的,并不能自定义 Vue Router 的配置文件。下面给出几个解决该问题的方案。

解决方案

综合考虑之后,决定采用官方方案实现。

实现方案

在需要的相关页面文件中添加自定义的 meta 信息

page/index.vue

export default {
  meta: {
    activeMenu: "/ad",
  },
}

自定义一个 middleware 将获取到的 meta 信息存在 Vuex Store 中方便后期获取,并且修改 Nuxt 配置的 router.middleware 字段使该自定义 middleware 生效

src/middleware/meta.js

export default ({ route, store }) => {
  store.commit("nav/setActiveMenu", route.meta[0]?.activeMenu || "");
};

nuxt.config.js

{
  router: {
    middleware: ['meta']
  },
}

src/store/nav.js

export const state = {
  activeMenu: "",
};
 
export const mutations = {
  setActiveMenu(state, activeMenu) {
    state.activeMenu = activeMenu;
  },
};

后期需要使用到该 meta 信息,就可以从 Vuex Store 中取出

export default {
  activeMenu: {
    activeMenu() {
      return this.$store.state.nav.activeMenu
    }
  }
}

参考链接

2023 © OXXD.RSS