nuxt 服务器渲染动态设置服务器渲染动态设置 title和和seo关键字的操作关键字的操作
使用如下钩子即可，但是前提条件是 没有默认配置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()
});
weixin_38568031
- 粉丝: 5
- 资源: 895
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论10