vue 页面动态切换title keywords description （seo的设置）

最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description

！！！在这里先添加一步：
html文件添加

<meta data-n-head="1" data-hid="description" name="description" content="">
<meta data-n-head="1" data-hid="keywords" name="keywords" content="">

第一步在路由文件router里面index.js文件夹中

routes: [{path: '/',name: 'main',component: Main,meta: {title: '首页title内容',content:{keywords:'这里是第一个keywords',description:'这里是第一个description',},}},{path: '/trueBag',name: 'trueBag',component: trueBag,meta: {title: 'trueBag页面的title内容',content:{keywords:'这里是第二个keywords',description:'这里是第二个description',},}},]

第二步在main.js里面设置，路由发生变化修改页面meta

前提是已经导入了router // 现在可以直接复制，不需要改什么东西 // 当然如果你想添加的meta,不仅仅只有keywords 和
description的时候， // 自己可以举一反三 : // setAttribute
后面就是设置它的值前提是要和router里面的content是相对应的 //要不然是获取不到的
//document.querySelector(‘meta[name=“description”]’).setAttribute(‘content’,
to.meta.content.description)

router.beforeEach((to, from, next) => {/* 路由发生变化修改页面meta */console.log(to.meta.content)if(to.meta.content){let head = document.getElementsByTagName('head');let meta = document.createElement('meta');document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)meta.content = to.meta.content;head[0].appendChild(meta)}// /* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title;}next()
});

vue 页面动态切换title keywords description （seo的设置）相关推荐

vue 每个页面动态切换title keywords description （seo的设置）
最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description !!!在这里先添加一步: html文件添加 <meta data-n-head=" ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
seo专题之五：title,keywords,description标签
接上篇,我们讲到了如何合理有效的选定关键字,同时也基本讲解了google抓取页面的原理．这篇我们再继续讲解HTML标签在SEO中的应用．根据我们上篇文章选定关键字之后,该如何在页面中应用这些关键字呢 ...
vue实现动态改变title
vue实现动态改变title 想要实现vue动态改变页面title,需要给每个页面设置标题.并且在路由发生变化时修改页面title router - index.js const router = n ...
【Unity】UGUI动态切换不同尺寸图片时自动设置Image大小
UGUI动态切换不同尺寸图片时自动设置Image大小: 1. image.SetNativeSize(),将Image设置为贴图的原始尺寸 2. sprite.rect获取贴图尺寸,rectTrans ...
vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
seo优化各个搜索引擎收录Title,keywords,description长度最长多长
SEO网站优化中Title标签的作用为重中之重,好的Title也就成功了一半了.那么Title的长度到底多长才能合适呢?搜索了一下网上的SEO资料,找到了一些关于各个搜索引擎对Title长度的要求,资 ...
smarty模板引擎总结六配置网站title,keywords,description
前台样式配置作用:配置前台一些数据 title,keys,网站的描述,一些css样式在smarty初始化文件 smarty.inc.php $smarty->config_dir = ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...

vue 页面动态切换title keywords description （seo的设置）

vue 页面动态切换title keywords description （seo的设置）相关推荐

最新文章

热门文章