vue TDK seo便于搜索引擎爬虫搜索，网站优化排名
最近在做一个商城官网，需要优化网站排名，公司要求做seo，项目架构用的vue SSR服务端渲染，由于vue是单页面应用，所以主要通过对路由的跳转动态切换title和meta里的内容来实现。
项目搭建就不多说了，主要是在gitHub上面下载的一个模版，后期会整理好再发一篇文章。
一、首先router.js给每个页面组件加上meta属性，然后meta属性里边定义一个title和index(因为tdk数据是后台请求到的数据，index是传给后台的参数，tdk的type :0.通用 1.首页 2.名人堂首页 3.文章首页 4.问答首页 5.领券中心 6.新人专享 7.选画中心页 8.名家子网)
export function createRouter() {
return new Router({
mode: 'history',
fallback: false,
scrollBehavior: () => ({ y: 0 }),
routes: [
{ path: '/', component: Home, meta: { title: '', index: 1 } },
{ path: '/login', component: Login, meta: { title: '' } },
{ path: '/register', component: Register, meta: { title: '' } },
{ path: '/setPassword', component: setPassword, meta: { title: '' } },
{ path: '/forgetPassword', component: forgetPassword, meta: { title: '' } },
{ path: '/resetPassword', component: resetPassword, meta: { title: '' } },
{ path: '/goods-:goods_id.html', component: Goods, meta: { title: '' } },
{ path: '/all', component: All, meta: { title: '' } },
{ path: '/shopCar', component: shopCar, meta: { title: '' } },
{ path: '/allfamous', component: Famous, meta: { title: '' } },
{ path: '/famouscompilations', component: famousCompilations, meta: { title: '', index: 2 } },
{ path: '/famousdetails', component: famousDetails, meta: { title: '' } },
{ path: '/xuanhua', component: xuanHua, meta: { title: '', index: 7 } },
{ path: '/huaniao', component: huaNiao, meta: { title: '' } },
{ path: '/renwu', component: renWu, meta: { title: '' } },
{ path: '/shanshui', component: shanShui, meta: { title: '' } },
{ path: '/shufa', component: shuFa, meta: { title: '' } },
{ path: '/dongwu', component: dongWu, meta: { title: '' } },
{ path: '/search', component: search, meta: { title: '' } },
{ path: '/article/', component: articleIndex, meta: { title: '', index: 3 } },
{ path: '/article_details', component: articleDetails, meta: { title: '' } },
{ path: '/question/', component: questionIndex, meta: { title: '', index: 4 } },
{ path: '/question_details', component: questionDetails, meta: { title: '' } },
{ path: '/ticketCenter', component: ticketCenter, meta: { title: '' } },
{ path: '/newUser', component: newUser, meta: { title: '' } },
{ path: '/userCenter', component: userCenter, meta: { title: '' } },
{ path: '/accountBalance', component: accountBalance, meta: { title: '' } },
{ path: '/recharge', component: recharge, meta: { title: '' } },
{ path: '/submitOrder', component: submitOrder, meta: { title: '' } },
{ path: '/address', component: adddressList, meta: { title: '' } },
{ path: '/orderPay', component: orderPay, meta: { title: '' } },
]
})
二、app.js里边定义函数请求数据调用函数动态改变title，meta里边name属性的keywords和description(请求用的axios，没有安装的需要npm install axios安装一下，若已安装淘宝镜像，可以cnpm install axios)
if (process.browser) {//(因为项目是用vue SSR服务端渲染方式实现，服务端访问不到window对象，所以判断process.browser是在客户端)
let head = document.getElementsByTagName('head'); // 创建head标签
let meta1 = document.createElement('meta'); // 创建meta标签
let meta2 = document.createElement('meta');
meta1.name = "keywords"; // 设置name
meta2.name = "description";
//获取其他页的tdk
function getMetaContent(index, h, m1, m2) {
var params = {
"Tdk": {
"type": index
}
}
axios.post('这里换成后台给的接口', params)
.then(function(res) {
let key = res.data.Tdk.tdk_keywords;
let desc = res.data.Tdk.tdk_description;
let title = res.data.Tdk.tdk_title;;
document.title = title || '设置默认内容';
m1.content = key || '设置默认内容';
m2.content = desc || '设置默认内容';
h[0].appendChild(m1)
h[0].appendChild(m2)
})
}
（商品页后台单独给的数据，数据是通过apiJson请求到的，参数需要自己修改，通过传商品的id请求到不同商品的tdk然后下边调用动态切换商品的title和meta里的name属性）
//获取商品页的tdk
function getGoodsMetaContent(index, h, m1, m2) {
var params = {
Goods: {
id: index,
"GoodsImgs[]": {
count: 0,
GoodsImgs: {
"goods_id@": "Goods/id",
use_flag: 1,
"@order": "rank-"
}
},
Artist: {
"id@": "Goods/artist_id"
}
}
};
axios.post('这里改成后台给的接口', params)
.then(function(res) {
let key = res.data.Goods.tdk_keywords;
let desc = res.data.Goods.tdk_description;
let title = res.data.Goods.tdk_title;;
document.title = title || '设置默认内容';
m1.content = key || '设置默认内容';
m2.content = desc || '设置默认内容';
h[0].appendChild(m1)
h[0].appendChild(m2)
})
}
//路由跳转之前动态切换title和meta的name属性
router.beforeEach((to, from, next) => {
var i;
//如果有商品id，说明跳入的是商品页，参数为商品id，如果没有则参数为router里定义好的meta里的index
if (to.params.goods_id) {
i = to.params.goods_id;
} else if (from.meta.index || to.meta.index) {
i = to.meta.index;
var j = from.meta.index;
} else {
next();
}
if (i == j) return // 减少请求次数
if (meta1.name == "keywords" || meta2.name == "description") { // 如果之前有获取过关键字，先清空内容
meta1.content = '';
meta2.content = '';
}
//如果跳入商品页执行getGoodsMetaContent，否则执行getMetaContent
if (to.params.goods_id) {
var i = to.params.goods_id;
getGoodsMetaContent(i, head, meta1, meta2)
} else {
getMetaContent(i, head, meta1, meta2);
}
next()
})
}
这样就可以动态改变title和meta的name的属性了。如果想学习一下怎么搭建vue SSR服务端渲染，请看我下一篇文章。