vuejs动态设置每个页面的标题、关键词和描述

首页html.js

<title></title>
<meta name="keywords" content="" />
<meta name="description" content="">

路由router/indexjs

const routes = [{
    path: "/index",
    name: "index",
    component: () =>
        import ("../views/Index.vue"),
    meta: {
        title: "首页",
        content: {
            keywords: '关键词',
            description: '描述'
        }
    }
}]

main.js

router.beforeEach((to, from, next) => {
    if (to.meta.content) {
        let head = document.getElementsByTagName('head');
        let meta = document.createElement('meta');
        document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
        document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
        meta.content = to.meta.content;
        head[0].appendChild(meta)
    }
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next()
});

以上是编程学习网小编为您介绍的“vuejs动态设置每个页面的标题、关键词和描述”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。