当前位置: 首页 > news >正文

【Vue前端】设置标题用于SEO优化

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

    • 1.vue全局配置
    • 2.创建并暴露getPageTitle方法
    • 3.通过全局前置守卫设置title
    • 4.页面上引用title
    • 5.项目使用中英文翻译,title失效


1.vue全局配置

我们在App.vue的同级创建settings.js文件,内容如下:

module.exports = {title: '天仪遥感数据中心',/*** @type {boolean} true | false* @description Whether fix the header*/fixedHeader: false,/*** @type {boolean} true | false* @description Whether show the logo in sidebar*/sidebarLogo: true
};

2.创建并暴露getPageTitle方法

const title = defaultSettings.title || 'Vue Element Admin';export default function getPageTitle(pageTitle) {if (pageTitle) {if (pageTitle === '首页') {return title;} else {return `${title}|${pageTitle}`;}}return `${title}`;
}

${title}|${pageTitle}是根据seo规则设置的,可以参考如下链接:https://blog.csdn.net/weixin_30166691/article/details/117980126?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%9F%BA%E4%BA%8Eseo%20html%20%E7%9A%84title%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2blogsobaiduweb~default-0-117980126.268v1control&spm=1018.2226.3001.4450

3.通过全局前置守卫设置title

import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/posts',component: PostsLayout,children: [{path: 'new',component: PostsNew,// 只有经过身份验证的用户才能创建帖子meta: { requiresAuth: true }},{path: ':id',component: PostsDetail// 任何人都可以阅读文章meta: { requiresAuth: false }}]}
]let router = createRouter({ routes, history })// 全局前置守卫
router.beforeEach(async(to, from, next) => {// 将元信息里的token通过to获取到,并且赋值给document的title属性document.title = getPageTitle(to.meta.title);// 然后直接放行next();
});export default router;

在这里插入图片描述

4.页面上引用title

<template><div class="userInfo"><el-tabs><el-tab-pane :label="$route.meta.title" /></el-tabs></div>
</template>

5.项目使用中英文翻译,title失效

需要在language/zh.js和language/en.js中设置
在这里插入图片描述
在这里插入图片描述

相关文章:

【Vue前端】设置标题用于SEO优化

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 1.vue全局配置2.创建并暴露getPageTitle方法3.通过全局前置守卫设置title4.页面上引用title5.项目使用中英文翻译&#xff0c;title失效 1.vu…...

maven install

maven install maven 的 install 命令&#xff0c;当我们的一个 maven 模块想要依赖其他目录下的模块时&#xff0c;直接添加会找不到对应的模块&#xff0c;只需要找到需要引入的模块&#xff0c;执行 install 命令&#xff0c;就会将该模块放入本地仓库&#xff0c;就可以进…...

Vue.js2+Cesium1.103.0 七、Primitive 绘制航线元素

Vue.js2Cesium1.103.0 七、Primitive 绘制航线元素 用 Primitive 绘制航线元素&#xff0c;包括航点图标&#xff0c;航线线段&#xff0c;线段距离标注&#xff0c;航点序号&#xff0c;海拔标注&#xff0c;总航程等信息。 可同时绘制多条航线&#xff1b;可根据 id 清除指…...

Mybatis 源码 ④ :TypeHandler

文章目录 一、前言二、DefaultParameterHandler1. DefaultParameterHandler#setParameters1.1 UnknownTypeHandler1.2 自定义 TypeHandler 三、DefaultResultSetHandler1. hasNestedResultMaps2. handleRowValuesForNestedResultMap2.1 resolveDiscriminatedResultMap2.2 creat…...

RabbitMQ和JMeter,一个完美的组合!优化你的中间件处理方式

RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息中间件&#xff0c;它是基于Erlang语言编写的&#xff0c;并发能力强&#xff0c;性能好&#xff0c;是目前主流的消息队列中间件之一。 RabbitMQ的安装可参照官网&#xff08; https://www.rabbitmq.c…...

WARNING: IPv4 forwarding is disabled. Networking will not work

当我在运行某条语句的时候 docker run -it -p 30001:22 --namecentos-ssh centos /bin/bash 提示 WARNING: IPv4 forwarding is disabled. Networking will not work. 解决&#xff1a; vim /usr/lib/sysctl.d/00-system.conf net.ipv4.ip_forward1 systemctl restart networ…...

SpringBoot复习:(40)@EnableConofigurationProperties注解的用法

一、配置文件&#xff1a; server.port9123 二、配置类&#xff1a; package cn.edu.tju.config;import com.mysql.fabric.Server; import org.springframework.boot.autoconfigure.web.ServerProperties; import org.springframework.boot.context.properties.EnableConfigu…...

Live Market是如何做跨境客户服务的?哪些技术赋能?

在面对不同的海外市场和用户群体时,如何进行有效地出海营销是跨境商家面临的挑战。其中消费者服务管理和卖家保障尤其关键&#xff0c;如何做好客户服务管理?包括处理好客户投诉,提升消费者满意度是所有跨境商家和品牌独立站卖家非常重视的问题。 在数字化浪潮席卷之下&#…...

2023年7月京东洗衣机行业品牌销售排行榜(京东数据分析软件)

2023年上半年&#xff0c;洗衣机市场表现平淡&#xff0c;同环比来看出货量都有一定程度的下滑。7月份&#xff0c;洗衣机市场仍未改变这一下滑态势。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;7月份&#xff0c;京东平台洗衣机的销量为109万&#xff0c;环比下降…...

【0214】postgres后端进程session退出,如何通过日志分析其会话信息

文章目录 1. postgres进程session退出2. 开启日志记录postgres进程会话状态3. postgres进程会话结束,记录日志的实现原理1. postgres进程session退出 默认情况下,新建一个postgres后端进程会话(session),或是postgres进程正常/异常退出时,日志中没有很明显的记录用于说明…...

Rust 重载运算符|复数结构的“加减乘除”四则运算

复数 基本概念 复数定义 由实数部分和虚数部分所组成的数&#xff0c;形如a&#xff0b;bi 。 其中a、b为实数&#xff0c;i 为“虚数单位”&#xff0c;i -1&#xff0c;即虚数单位的平方等于-1。 a、b分别叫做复数a&#xff0b;bi的实部和虚部。 当b0时&#xff0c;a&…...

Oracle删除表空间

1.检查表空间状态 SELECT tablespace_name, status FROM dba_tablespaces;备注&#xff1a;tablespace_name表示删除表空间的名称&#xff0c;status为表空间的状态。如果状态为ONLINE&#xff0c;表示表空间当前正在使用&#xff0c;不能被删除。 2.关闭表空间 ALTER TABLE…...

Mysql - 配置Mysql主从复制-keepalived高可用-读写分离集群

目录 高可用&#xff1a; 为什么需要高可用呢&#xff1f; 高可用的主要作用&#xff1a; keepalived是什么&#xff1f;它用在哪里&#xff1f; 什么是VRRP协议&#xff0c;它的作用是什么&#xff1f; 搭建一个基于keepalived的高可用Mysql主从复制读写分离集群 一、项…...

Qt QLineEdit输入时限制,采用正则表达式

QLineEdit 正则 序言使用方法正则表达式使用例子 序言 老是有人在群里问这个&#xff0c;所以我干脆写一篇方便予人查看&#xff0c;很简单的小功能。 使用方法 Qt5 #include <QRegExpValidator> //#include "qvalidator.h"ui->lineEdit->setValida…...

【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式 代码&#xff1a; <style> p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;ove…...

Django快速上手,写一个简单的页面,快来看看吧~

还没有安装Django&#xff0c;以及不会创建Django项目的小伙伴&#xff0c;可以先看看博主这篇文章&#xff1a;http://t.csdn.cn/Ly7yM 目录 1、项目创建完成后&#xff0c;需要注意的点&#xff1a; 2、创建app 3、app的各个目录的作用 4、快速上手 4.1、注册app 4.2、U…...

【Express.js】数据库初始化

数据库初始化 在软件开发阶段和测试阶段&#xff0c;为了方便调试&#xff0c;我们通常会进行一系列的数据库初始化操作&#xff0c;比如重置数据表&#xff0c;插入记录等等&#xff0c;或者在部署阶段进行数据初始化的操作 根据前面章节介绍过的 knex.js 和 sequelize.js&…...

【数理知识】三维空间旋转矩阵的欧拉角表示法,四元数表示法,两者之间的转换,Matlab 代码实现

序号内容1【数理知识】自由度 degree of freedom 及自由度的计算方法2【数理知识】刚体 rigid body 及刚体的运动3【数理知识】刚体基本运动&#xff0c;平动&#xff0c;转动4【数理知识】向量数乘&#xff0c;内积&#xff0c;外积&#xff0c;matlab代码实现5【数理知识】最…...

【业务功能篇63】Springboot聊聊 过滤器和拦截器

过滤器的场景&#xff1a;过滤器通常用于对数据或资源进行筛选、修改或转换的场景。例如&#xff0c;在一个电子商务网站中&#xff0c;用户进行商品搜索时&#xff0c;你可以使用过滤器来过滤特定的商品类别、价格范围或其他条件&#xff0c;以便用户仅看到符合筛选条件的结果…...

提高学生学习效率的模拟考试系统

在如今竞争激烈的社会环境下&#xff0c;提高学生的学习效率显得尤为重要。为了帮助学生评估自己的学习水平并提供有针对性的学习建议&#xff0c;开发一款模拟考试系统是非常必要的。 一、学生信息录入 模拟考试系统首先需要学生信息录入功能。学生可以通过一个简单的表单填…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...