处理 Vue 单页面应用 SEO

时间:2022-02-09 03:48:49

由于在vue单页应用中title只设定在入口文件index.html,如果切换路由,title怎么更换?

在路由router中设置meta:

{
path:'/chooseBrand',
component: resolve => require(['../components/page/myzone.vue'], resolve),
meta: {
title: 'title标题'
}

在main.js里面加上

router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})

  这样的话在切换路由时就会更换你在meta中设置的title。(js改变title:document.title = "myzone";

处理 Vue 单页面应用 SEO的更多相关文章

  1. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

  2. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  3. vue单页面处理SEO问题

    设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...

  4. 在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...

  5. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  6. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

  7. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. [one day one question] Vue单页面应用如何保证F5强刷不清空数据

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...

随机推荐

  1. Beta版本冲刺第七天

    Aruba 408 409 410 428 429 431 完成任务: 新增:完成文字导出为图片并改善画布大小 改进:适应MIUI系统相册选图 改进:调整activity间的跳转逻辑 改进:调整编辑窗 ...

  2. poi jar包的作用

    目前POI的最新发布版本是3.10_FINAL.该版本保护的jar包有: Maven artifactId Prerequisites JAR poi commons-logging, commons ...

  3. 利用sklearn计算文本相似性

    利用sklearn计算文本相似性,并将文本之间的相似度矩阵保存到文件当中.这里提取文本TF-IDF特征值进行文本的相似性计算. #!/usr/bin/python # -*- coding: utf- ...

  4. JAVA设计模式之依赖倒转原则

    3.1 依赖倒置原则的定义 依赖倒置原则(Dependence Inversion Principle,简称DIP)这个名字看着有点别扭,“依赖”还“倒置”,这到底是什么意思?依赖倒置原则的原始定义是 ...

  5. hdu 5311 Hidden String(find,substr)

    Problem Description Today is the 1st anniversary of BestCoder. Soda, the contest manager, gets a str ...

  6. 反射导出excel案例

    1.代码案例: protected void btnExportExcel_Click(object sender, EventArgs e) { SetSearchValue(); Dictiona ...

  7. Linnux入门之简介

    一.Linux简介 Minix(教授实验) -> Linux(大三学生Linus)企鹅作为吉祥物 linux主要分为内核版本和发行版本 linux 内核版本 :官网下载:https://www. ...

  8. GhostScript应用一例:使用GhostScript强行修改加密PDF

    GhostScript官方网站为:http://www.ghostscript.com/ 作为一个英文开源软件,发现国内用的人很少.尤其是在Windows环境下,Acrobat/Adobe/Foxit ...

  9. swf 文件解析

    public class TagTypes     {         // Flash 1 tags         public static const TAG_END:uint = 0;    ...

  10. nio的简单学习

    参考链接: http://www.iteye.com/magazines/132-Java-NIO https://www.cnblogs.com/xiaoxi/p/6576588.html http ...

相关文章