1、安装依赖

npm install vue-meta --save

2、在main.js中注册全局使用

import Meta from 'vue-meta';
Vue.use(Meta);

3、在router/index.js中给每个路由赋一个静态属性对象 metaInfo

const routes = [{path: '/',name: 'website_index',component: website_index,children: [{ path: '/', name: '/',component: home_main,meta: {metaInfo: {title: "首页",keywords: "这是网页的关键词",description: "这是网页的描述"}}}]},
]

4、在vuex中存储一个空的属性对象和定义方法

 state: { metaInfo: { }},mutations: {CAHNGE_META_INFO(state, metaInfo) { state.metaInfo = metaInfo;}}

5、在main.js或router/index.js中使用路由拦截守卫

router.beforeEach((to, from, next) => {if (to.meta.metaInfo){store.commit("CAHNGE_META_INFO", to.meta.metaInfo)}next()
});
new Vue({router,store,    metaInfo(){return {title: this.$store.state.metaInfo.title,meta: [{name: "keywords",content: this.$store.state.metaInfo.keywords}, {name: "description",content: this.$store.state.metaInfo.description}]}},render: h => h(App)
}).$mount('#app')

6、动态设置meta标签属性(如详情页不同的title)

删除需要动态meta标签属性的路由配置中的metaInfo对象

7、在设置动态meta的路由组件页面中

mounted () { let metaInfo = {title: "动态页面名称",keywords: "动态页面关键词",description: "动态页面描述"}this.$store.commit("CAHNGE_META_INFO", metaInfo)
}

vue-meta插件动态设置meta和title标签(适用于ssr)相关推荐

vue 开发：动态设置html的title
技术干货当页面跳转(路由发生变化)时,操作title即可~ // 路由 router.js {path: '/index',component: resolve => require(['** ...
vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
Vue项目如何动态设置路由meta信息中的title属性值
场景:编辑.新建页面配置为同一个路由信息,期望不同页面的文档title展示不一样. 目前的配置如下,不能实现需求. 因此,我们需要动态的去设置meta的值.思路:借助Vue Router的路由独享守卫 ...
动态设置meta标签
亲测可用,若有疑问请私信有时候在项目中打开别的网页,需要给网页设置meta,如缩放禁止等.这时候在index.html中设置失效需要额外设置. 可以使用插件vue-meta: 文档:https:/ ...
通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
html的title设置,动态设置html的title
使用vue前端框架做,竟然丢弃了很多javascript和html的东西了.. 动态设置title的方法: 1.使用vue的自定义指令 {{htmltitle}} ... directives: { ...
angular5+动态设置页面标题title
在实际的开发项目当中,经常需要对访问网页的title进行动态配置,就像这样的东东, 所以今天来记录下怎么动态配置title 一.首先,准备一个 .json的配置文件放置在静态资源assets文件夹下 ...
vue seo管理 vue-meta-info 动态设置meta和title
使用 vue-meta-info 配置title和meta按照以下步骤 1.安装 yarn: yarn add vue-meta-info npm: npm install vue-meta-info ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
vue-meta-info动态设置meta标签
网站的访问流量中,有相当一部分都是来自于搜索引擎,而来自于搜索引擎的流量又全部是免费的,所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接 ...

vue-meta插件动态设置meta和title标签(适用于ssr)

1、安装依赖

vue-meta插件动态设置meta和title标签(适用于ssr)相关推荐

最新文章

热门文章