vue-meta插件管理头部标签

最新推荐文章于 2024-10-11 07:02:42 发布

半夏_2021

最新推荐文章于 2024-10-11 07:02:42 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fd2025/article/details/124779143

版权

Vue 专栏收录该内容

66 篇文章 17 订阅

订阅专栏

本文介绍了vue-meta插件的使用，它是一个基于Vue2.0的库，用于方便地管理和更新HTML头部标签，并且支持服务器端渲染（SSR）。通过在组件内设置metaInfo，可以响应式地更新页面标题等头部信息。在路由拦截器中，可以根据不同路由动态设置标题，从而实现灵活的页面头部管理。

摘要由CSDN通过智能技术生成

vue-meta 是基于Vue2.0 的vue-meta 插件，主要用于管理HTML头部标签，同时也支持SSR

vue-meta 有以下几个特点:

1.在组件内设置metainfo ,便可以轻松实现头部标签的管理。

2.metainfo 的数据都是响应的，如果数据变化，头部信息就会自动更新

3.支持SSR

1.安装

npm install vue-meta --save

2.引入

在main.js中引入

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

然后就可以开始使用metaInfo了。在任何一个component中都可以定义 metaInfo 属性

3.使用

我们在App.vue中使用

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default  {
  name:  'App',
    metaInfo() {
    //设置浏览器标签页标题
        return {
         // 这里的 title 会替换 titleTemplate 中的字符占位
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            // 这里定义titleTemplate会覆盖App.vue中的定义
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
}
</script>

我们可以在路由卫士拦截器中，设置标题，设置到store中的 state的title中

router.beforeEach((to, from, next) => {
  NProgress.start();
  if (getToken()) {
    // 如果路由meta中有标题，则触发后面动作 设置store/setting/state.title,然后用在App.vue中
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title);