vue與vue-router搭配設置TDK
參考鏈接:使用Vue.js和vue-router更新頁面標題和元數據
目錄
文檔結構:
|- src
|-- components
|--- index.vue
|--- about.vue
|-- router
|--- index.js
|--- meta.js
|-- App.vue
|-- main.js
TDK配置meta.js
const maping = {
home: {
title: '首頁',
metaTags: [
{
name: 'keywords',
content: 'home,vue, router, meta',
},
{
name: 'description',
content: '這是首頁的一段描述',
},
]
},
about: {
title: '關於',
metaTags: [
{
name: 'keywords',
content: 'about, vue, router, meta',
},
{
name: 'description',
content: '這是關於的一段描述',
},
]
},
};
export default maping;
路由配置index.js
import Vue from 'vue'
import Router from 'vue-router'
import maping from './mate.js'
import Index from '@/components/index'
import About from '@/components/about'
Vue.use(Router)
const RouterHome = {
path: '/',
name: 'index',
component: Index,
meta: maping.index,
};
const RouterAbout = {
path: '/',
name: 'about',
component: About,
meta: maping.about,
};
const router = new Router({
mode: 'history',
routes: [
RouterHome,
RouterAbout,
],
});
router.beforeEach((to, from, next) => {
const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
console.log(previousNearestWithMeta);
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));
next();
});
export default router;
設置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
啓動應用程序
npm run dev