vue与vue-router搭配设置TDK

vue与vue-router搭配设置TDK

参考链接：使用Vue.js和vue-router更新页面标题和元数据

目录

vue与vue-router搭配设置TDK

TDK配置meta.js

路由配置index.js

设置main.js

启动应用程序

---

文档结构：

|- 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