nuxt 服务器渲染动态设置 title和seo关键字的操作


Posted in Javascript onNovember 05, 2020

使用如下钩子即可,但是前提条件是 没有默认配置head的title

asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},

补充知识: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()
});

nuxt 服务器渲染动态设置 title和seo关键字的操作

具体是否成功可以f12查看,如果没有出来,一步一步打印一下,看自己是哪里出错。

以上这篇nuxt 服务器渲染动态设置 title和seo关键字的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
微信JS接口大全
Aug 25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Vue生命周期示例详解
Apr 12 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
JavaScript TAB栏切换效果的示例
Nov 05 #Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 #Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 #Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 #Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
You might like
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
php时区转换转换函数
2014/01/07 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
jquery密码强度校验
2015/12/02 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
项目经理任命书范本
2014/06/05 职场文书
普通话宣传标语
2014/06/26 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Python OpenGL基本配置方式
2022/05/20 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers