vue-meta 设置页面＜meta＞

一、vue-meta 安装

npm install --save vue-meta

二、在 main.js 使用依赖

/** Copyright © 2019-2020 LiuDanYang. All rights Reserved.*/import Vue from "vue";import App from "./App.vue";
import store from "./store";
import router from "./router";// 使用 vue-meta
import Meta from "vue-meta";
Vue.use(Meta);Vue.config.productionTip = false;new Vue({router,store,render: (h) => h(App),
}).$mount("#app");

三、页面设置固定的meta

<!--- Copyright © 2019-2020 LiuDanYang. All rights Reserved.--><template><div class="container"></div>
</template><script>
export default {name: "Home",data() {return {};},metaInfo: {title: "页面标题",meta: [{ name: "keywords", content: "页面关键字" },{ name: "description", content: "页面描述" },],},created() {},methods: {},
};
</script><style lang="scss" scoped></style>

四、页面请求数据设置的meta

<!--- Copyright © 2019-2020 LiuDanYang. All rights Reserved.--><template><div class="container"></div>
</template><script>
export default {name: "Home",data() {return {setting: {title: "",keywords: "",description: "",},};},metaInfo() {return {title: this.setting.title,meta: [{ name: "keywords", content: this.setting.keywords },{ name: "description", content: this.setting.description },],};},created() {this.getSetting();},methods: {// 模拟接口获取数据setTimeout(() => {this.setting.title = "页面标题";this.setting.keywords = "页面关键字";this.setting.description = "页面描述";}, 2000);},
};
</script><style lang="scss" scoped></style>

五、效果

参考：vue-meta 、vue-meta 文档

vue-meta 设置页面＜meta＞相关推荐

Vue 动态设置路由Meta title 名称
路由配置 import ('@/views/accountManagement/editMain'), beforeEnter: (to, from, next) => {if (to.quer ...
vue 动态设置页面title
在这里我们介绍3种方法 1.通过自定义指令去修改(单个修改比较好) 1.在main.js 页面里添加自定义指令// Vue.directive('title', {//单个修改标题inserted: ...
vue动态设置页面title
一.项目场景: 新建一个vue项目,默认的页面title是这样的: 那如何做成这种如CSDN一样动态的呢? 分析:这个title分为两部分:"写文章"+"CSDN博客&q ...
vue单独设置页面背景
背景: 平台首页配置全局样式,设置了背景图,但是某模块的功能页面不需要这个背景,如何处理? 方案一: 在界面中添加以下方法 beforeCreate () { document.querySele ...
html手机端页面meta,移动端网页meta设置和响应式
苏宁易购WAP的meta分析响应式 meta设置媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...
移动端meta设置大全(持续收集中。。。。)
移动端meta设置大全(持续收集中....) 声明文档使用的字符编码: <meta charset='utf-8'> 优先使用 IE 最新版本和 Chrome: <meta http ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
asp.net mvc 利用过滤器进行网站Meta设置
过去几年都是用asp.net webform进行开发东西,最近听说过时了,同时webform会产生ViewState(虽然我已经不用ruanat=server的控件好久了 :)),对企业应用无所谓,但 ...
vue从其它页面返回_vue---详细页点返回列表页，停留在原先位置
列表页面,点击进入到详情页面,在详情页面向下滑动时,滚动条变化,document.documentElement.scrollTop变化,点击返回按钮时,列表页面的document.documentE ...
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...

vue-meta 设置页面＜meta＞

一、vue-meta 安装

二、在 main.js 使用依赖

三、页面设置固定的meta

四、页面请求数据设置的meta

五、效果

vue-meta 设置页面＜meta＞相关推荐

最新文章

热门文章

vue-meta 设置页面 ＜meta＞

一、vue-meta 安装

二、在 main.js 使用依赖

三、 页面设置固定的meta

四、页面请求数据设置的meta

五、效果

vue-meta 设置页面 ＜meta＞相关推荐

最新文章

热门文章

vue-meta 设置页面＜meta＞

三、页面设置固定的meta

vue-meta 设置页面＜meta＞相关推荐