本文基于工作項目開發(fā)，做的整理筆記
前幾天幫朋友解決這個問題滓侍，順帶學習了一下，做個筆記Mark下牲芋。
前提條件：
你已經(jīng)了解并使用vue撩笆，能夠搭建應用站點捺球。
編碼環(huán)境：
system：OS X EI Capitan 10.13.3
npm：5.5.1
node：v8.9.3
vue-cli：@lastest
相關(guān)技術(shù)棧：
vue2 + vue-router
相關(guān)地址：
參考閱讀：https://alligator.io/vuejs/vue-router-modify-head/
基于vue.js&vue-router的動態(tài)更新TDK.jpg
1.router部分
直接看代碼，主要包含一個配置變量mapping夕冲，也可以抽出去放到單獨的配置文件中氮兵，這里就簡化放進來了，容易看耘擂。在路由配置中胆剧，給了一個meta字段用于存放對應的TDK信息絮姆。
注意：這里我們發(fā)現(xiàn)NewsDetail暫存的TDK信息和News一樣醉冤，沒關(guān)系，因為它和ID有關(guān)篙悯，在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-【官網(wǎng)名稱】',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxxx, xxx, xxx'
},
{
name: 'description',
content: '官網(wǎng)頁面的一段描述'
},
],
},
news: {
title: '【新聞熱點】_xxxxxxx-官網(wǎng)名稱',
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-官網(wǎng)名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '這一搜索條件的相關(guān)描述'
},
],
},
'/news/1': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網(wǎng)名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點1的相關(guān)描述'
},
],
},
'/news/2': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網(wǎng)名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點2的相關(guān)描述'
},
],
},
'/hot-news/3': {
title: '【xxxxx_新聞熱點】_xxxxxx-官網(wǎng)名稱',
metaTags: [
{
name: 'keywords',
content: 'xxx, xx, xxxx, xxx, xxx'
},
{
name: 'description',
content: '新聞熱點3的相關(guān)描述'
},
],
},
}
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} // 將跳轉(zhuǎn)的路由path作為參數(shù)矮燎，登錄成功后跳轉(zhuǎn)到該路由
// });
}
}
else {
next();
}
});
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app');
3. 疑問
我們大多都知道SEO優(yōu)化有很多方式定血，更可行的可能是SSR后端渲染，但是畢竟有時候我們就是前端渲染實現(xiàn)某個官網(wǎng)诞外，只能找找其他簡單可行辦法澜沟。文中這種做法實際上只有真是訪問的時候才可以拿到真正準確的TDK，各搜索引擎的爬蟲拿到的是靜態(tài)文件index.html的代碼view-source峡谊，那個時候TDK還沒有被替換茫虽，不知道這種做法是否真的有利于SEO。有待驗證既们。
歡迎留言提出此類問題的優(yōu)化濒析，互相學習。
學習是一條漫漫長路啥纸，每天不求一大步号杏，進步一點點就是好的。
