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

首页html.js

复制代码<title></title>
<meta name="keywords" content="" />
<meta name="description" content="">
1
2
3

路由router/indexjs

复制代码const routes = [{
    path: "/index",
    name: "index",
    component: () =>
        import ("../views/Index.vue"),
    meta: {
        title: "首页",
        content: {
            keywords: '关键词',
            description: '描述'
        }
    }
}]
1
2
3
4
5
6
7
8
9
10
11
12
13

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()
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

进入前端入门建站教程官网入口

网站文章页面优化要注意标题、描述及关键词

wordpress发布文章后标题分隔符（被转义成）解决方法

wordpress各种wp_title标题介绍

分析文章内容与标题的匹配度对用户粘度的影响

网站优化SEO双标题怎么写

标签：描述, 标题

上面是“vuejs动态设置每个页面的标题、关键词和描述”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1518.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！