vue-meta实现router动态设置meta标签

一. meta标签提供关于HTML文档的元数据 (元数据指用来描述数据的数据)。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或从新加载页面)、搜索引擎(关键词搜索)、或其他web服务。
二. meta标签的特点
meta标签只能位于head元素内部。
在html中，meta标签没有结束标签。在xhtml中，meta标签必须被正确地关闭。
meta标签共有两个属性，分别是http-equiv属性和name属性。
三.通过引入vue-meta模块

无序

 npm install vue-meta --save

在main.js中引入

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

使用

 new Vue({router,data:{title:"张培跃",keywords:"玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",description:"这么神奇吗？都已经很难用言语来描述了"},metaInfo(){return {title: this.title,meta: [{name:"keywords",content: this.keywords},{name:"description",content: this.description}]}},render: function (h) { return h(App) }
}).$mount('#app')

四.vue路由中动态设置title与meta

在router.js中创建路由：

routes:[
{name:"Qq",path:"/qq",component:Qq，meta：{metaInfo：{title:"腾讯首页",keywords: "资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent",description: "腾讯网从2003年创立至今，已经成为集新闻信息……"}}
},
{path: "/jd",name: "Jd",component: Jd,meta: {metaInfo: {title: "京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！",keywords: "网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东",description: "京东JD.COM-专业的综合网上购物商城，……"}}}
]

在store.js中创建状态：

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
const state = {metaInfo: {title: "张培跃",keywords: "玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",description: "这么神奇吗？都已经很难用言语来描述了"}
};
const mutations = {CAHNGE_META_INFO(state, metaInfo) {state.metaInfo = metaInfo;}
};
export default new vuex.Store({state,mutations,
})

main.js

 import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Meta from 'vue-meta'
import store from './store'Vue.use(Meta)Vue.config.productionTip = false;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: function (h) {return h(App)}
}).$mount('#app')

————————————————
版权声明：本文为CSDN博主「张培跃吧」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012149969/article/details/92709600

vue-meta实现router动态设置meta标签相关推荐

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修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
动态设置meta标签
亲测可用,若有疑问请私信有时候在项目中打开别的网页,需要给网页设置meta,如缩放禁止等.这时候在index.html中设置失效需要额外设置. 可以使用插件vue-meta: 文档:https:/ ...
vue-meta-info动态设置meta标签
网站的访问流量中,有相当一部分都是来自于搜索引擎,而来自于搜索引擎的流量又全部是免费的,所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接 ...
Vue:单页面应用动态设置title
vue开发的单页面应用,需要在进入不同路由时动态改变title vue-cli 3 构建的项目 1.修改public>index.html 修改title标签id为:public_title,后 ...
html vue.js readonly,使用js设置input标签只读 readonly 属性
先上代码: test function setReadonly() { //document.getElementById("test").setAttribute("r ...
Vue+i18n多语言动态设置（保姆级案例教程）
效果
Vue动态设置路由title
{ path: '/videoCover', component: () => import ('./view/videoCover.vue'), meta: {title: ''}, }, 需 ...

vue-meta实现router动态设置meta标签

vue-meta实现router动态设置meta标签相关推荐

最新文章

热门文章