由于在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. 我的Spring Boot学习记录(一):自动配置的大致调用过程

    1. 背景 Spring Boot通过包管理工具引入starter包就可以轻松使用,省去了配置的繁琐工作,这里简要的通过个人的理解说下Spring Boot启动过程中如何去自动加载配置. 本文中使用的 ...

  2. mac 卸载通过官网下载包安装的node

    sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

  3. Django 提交 form 表单

    创建 Django 的过程可以参考上一篇文章 https://www.cnblogs.com/klvchen/p/10601536.html 在 templates 文件夹下创建一个 index.ht ...

  4. API测试工具SoapUI & Postman对比分析

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近公司要引入API测试工具,经过调查和了解,最终决定在SoapUI ...

  5. Java:配置环境(Mac)——Tomcat

    1.官网下载 2.把下载的文档解压,放到合适的路径下. 3.打开eclipse 4.在Apache文件夹下选择Tomcat的对应版本 5.选择刚才下载的文件 6.可以右键Start了

  6. Spark Streaming 快速入门

    一.简介 1.便于使用 Spark Streaming将Apache Spark的 语言集成API 引入流处理,使您可以像编写批处理作业一样编写流式作业.它支持Java,Scala和Python. 2 ...

  7. ASP.NET Zero--WEB.HOST应用程序

    WEB.HOST应用程序 AspNet Zero解决方案包含一个额外的项目Web.Host,它将所有应用程序功能公开为API.因此,您可以从任何设备使用API​​.实际上,Web.Mvc项目也是这样做 ...

  8. python类的继承、封装和多态

    摘自https://www.cnblogs.com/evablogs/p/6724477.html 继承 1 2 3 4 5 6 7 8 class Person(object):     def _ ...

  9. DNS域名解析过程,域名的认识

    DNS域名解析过程 参考知乎:https://www.zhihu.com/question/23042131 当你通过浏览器输入url访问资源时,会请求DNS解析域名成对应的IP地址,由IP地址在去与 ...

  10. 作业MyCP中无法命令行输入的问题解决

    问题 上网搜了好久,发现是我当时安装JDK时安装了多个版本的JDK javac -version.java -version发现版本不一样 解决 删掉多余的JDK,并在环境变量Path中找到目录,删掉 ...