在上面的例子中,我们为首页指定了title、keywords和description三个meta标签,分别用于设置网页的标题、关键词和描述。 3. 如何动态修改Vue中的meta标签? 有时候我们需要根据不同的页面动态修改meta标签的内容。Vue提供了一种方便的方式来实现这个功能。我们可以使用Vue的生命周期钩子函数来监听路由的变化,并在路由变化时...
metaInfo () { return { title: this.title, meta: [ { vmid: 'description', name: 'description', content: this.description } ] } }, 其中,title,description都可以是异步获取的数据。 二、源码分析 1、怎么区分 client 和 server渲染? vue-meta 会在 beforeCreate() 钩子函数中,将组件中设置的 meta...
metaTag.setAttribute('name', 'description'); metaTag.setAttribute('content', to.meta.description || 'Default Description'); document.head.appendChild(metaTag); } next(); }); 通过上述代码,我们可以在页面导航时自动更新页面的title和description meta标签。 二、使用第三方插件如vue-meta 1、安装vue-m...
Vue Js add Dynamic meta-tags(Description) | Example 1 <div id="app"> 2 <label for="description">Enter description:</label> 3 <input id="description" v-model="description" type="text"> 4 <pre v-if="description">Update Meta Description: {{description}}</pre> 5 </div> 6 <script...
},methods: {// 模拟接口获取数据setTimeout(() =>{this.setting.title="页面标题";this.setting.keywords="页面关键字";this.setting.description="页面描述"; },2000); }, };</script><stylelang="scss"scoped></style> 五、效果 参考:vue-meta、...
可以通过引入vue-meta模块,实现以优雅的方式设置title与meta。 1、安装 npm install vue-meta -S 2、在main.js中引入 importMetafrom'vue-meta';Vue.use(Meta); 3、使用 newVue({router,data:{title:"张培跃",keywords:"玉树临风,风流倜傥,英俊潇洒,才高八斗,貌似番安",description:"这么神奇吗?都已经很难...
Vue2.x使用Vue-meta十分简单,没什么坑(用Vue3.x时候……呜呜呜,全是坑)。 实现的方法很多,我这里讲解我的实现思路: VueX设置每个页面的description和keywords,之后作用于Vue-meta并在路由内拦截赋值。 首先是使用npm或其他包管理器安装: 代码语言:shell ...
因为title、keywords、description会随着页面变化而变化的。可以写一个公共的方法,在需要的时候直接调用就额可以了 /** * 配置 seo * @param title 网页标题 * @param key 关键词 * @param des 描述 */setMeta:function(title,key,des){lettitle_default="网站名称";if(title){title_default+=title;}documen...
vue-meta有以下特点: 1、在组件内设置 metaInfo,便可轻松实现头部标签的管理 2、metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新 3、支持 SSR 一、使用方法 安装:npm install vue-meta --save 引入:在main.js里引入 import VueMeta from 'vue-meta' ...
description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 如需使用 vue-meta-info 配置title和meta按照以下步骤: 1.安装 npm install vue-meta-info--save AI代码助手复制代码 2.在main.js引入 importMetaInfofrom'vue-meta-info'Vue.use(MetaInfo) ...