seo vue 动态路由_基于vue.jsvue-router的动态更新TDK（SEO优化）
本文基于工作項目開發，做的整理筆記
前幾天幫朋友解決這個問題，順帶學習了一下，做個筆記Mark下。
前提條件：
你已經了解并使用vue，能夠搭建應用站點。
編碼環境：
system：OS X EI Capitan 10.13.3
npm：5.5.1
node：v8.9.3
vue-cli：@lastest
相關技術棧：
vue2 + vue-router
基于vue.js&vue-router的動態更新TDK.jpg
1.router部分
直接看代碼，主要包含一個配置變量mapping，也可以抽出去放到單獨的配置文件中，這里就簡化放進來了，容易看。在路由配置中，給了一個meta字段用于存放對應的TDK信息。
注意：這里我們發現NewsDetail暫存的TDK信息和News一樣，沒關系，因為它和ID有關，在app.js那邊我們還要具體處理。
/**********************************************/
/* src/router/index.js */
/**********************************************/
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/layout'
import Home from '@/components/home'
import News from '@/components/hot-news'
import Detail from '@/components/hot-news/detail'
import About from '@/components/info/about'
import ContactUs from '@/components/info/contact-us'
import JoinUs from '@/components/info/join-us'
import Terms from '@/components/info/terms'
import Error404 from '@/components/404'
Vue.use(Router)
const mapping = {
home: {
title: 'xxxxxxxxxxxxxxxx-【官網名稱】',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxxx, xxx, xxx'
},
{
name: 'description',
content: '官網頁面的一段描述'
},
],
},
news: {
title: '【新聞熱點】_xxxxxxx-官網名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點頁面的一段描述'
},
],
},
}
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: Layout,
// redirect: '/home',
hidden: true,
children: [
{
path: '',
component: Home,
meta: mapping.home,
},
{
path: 'home',
redirect: '/',
component: Home,
meta: mapping.home,
},
{
path: 'news',
component: News,
meta: mapping.news,
},
{
path: 'news/:id',
component: NewsDetail,
meta: mapping.news,
},
{
path: 'about',
component: About,
meta: mapping.home,
},
{
path: 'contact-us',
component: ContactUs,
meta: mapping.home,
},
{
path: 'join-us',
component: JoinUs,
meta: mapping.home,
},
{
path: 'terms',
component: Terms,
meta: mapping.home,
},
{
path: '404',
component: Error404,
meta: mapping.home,
},
]
},
]
})
2. 看看app.js這邊如何使用
這段代碼中，也有一個配置變量mappingFull，它主要服務于那種帶查詢條件的，帶id的具體路由的TDK。另外注意的就是方法
/**********************************************/
/* src/app.js */
/**********************************************/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/style/base.scss'
Vue.use(ElementUI);
Vue.config.productionTip = false
const mappingFull = {
'/news?categary=xxxxx': {
title: '【新聞熱點】_xxxxx-官網名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '這一搜索條件的相關描述'
},
],
},
'/news/1': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點1的相關描述'
},
],
},
'/news/2': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點2的相關描述'
},
],
},
'/hot-news/3': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點3的相關描述'
},
],
},
}
router.beforeEach((to, from, next) => {
const matchPath = to.matched.slice().reverse();
const meta = mappingFull[to.fullPath];
// console.log(to.fullPath); // 可以打印輸出看看
// console.log(meta);
let nearestWithTitle = undefined;
let nearestWithMeta = undefined;
if (meta) {
nearestWithTitle = { meta };
nearestWithMeta = { meta };
} else {
nearestWithTitle = matchPath.find(r => r.meta && r.meta.title);
nearestWithMeta = matchPath.find(r => r.meta && r.meta.metaTags);
}
if(nearestWithTitle) document.title = nearestWithTitle.meta.title;
Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
if(!nearestWithMeta) return next();
nearestWithMeta.meta.metaTags.map(tagDef => {
const tag = document.createElement('meta');
Object.keys(tagDef).forEach(key => {
tag.setAttribute(key, tagDef[key]);
});
tag.setAttribute('data-vue-router-controlled', '');
return tag;
})
.forEach(tag => document.head.appendChild(tag));
if (to.need && to.need.requireAuth) {
if (store.getters.token) {
next();
}
else {
next('/home');
// next({
// path: '/login',
// query: {redirect: to.fullPath} // 將跳轉的路由path作為參數，登錄成功后跳轉到該路由
// });
}
}
else {
next();
}
});
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app');
3. 疑問
我們大多都知道SEO優化有很多方式，更可行的可能是SSR后端渲染，但是畢竟有時候我們就是前端渲染實現某個官網，只能找找其他簡單可行辦法。文中這種做法實際上只有真是訪問的時候才可以拿到真正準確的TDK，各搜索引擎的爬蟲拿到的是靜態文件index.html的代碼view-source，那個時候TDK還沒有被替換，不知道這種做法是否真的有利于SEO。有待驗證。
歡迎留言提出此類問題的優化，互相學習。
學習是一條漫漫長路，每天不求一大步，進步一點點就是好的。
總結
以上是生活随笔為你收集整理的seo vue 动态路由_基于vue.jsvue-router的动态更新TDK（SEO优化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gdonkey.exe是什么进程 有什么
- 下一篇： html5倒计时秒杀怎么做,vue 设