由于在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. 安卓9.0系统机器(亲测有效)激活Xposed框架的步骤

    对于喜欢玩手机的哥们来说,经常会用到xposed框架及其种类繁多功能无敌的模块,对于5.0以下的系统版本,只要手机能获得root权限,安装和激活xposed框架是非常简便的,但随着系统版本的持续更新, ...

  2. 测者的测试技术手册:Java中的null类型是测试不可超越的鸿沟

    null是一个非常非常特殊的类型,对于每一个测试人员都要十分小心null的存在的可能性.同时null也让很多RD头疼,甚至连Java的设计者都成人null是一个设计失误.这篇文章,测者想聊聊这个让很多 ...

  3. 『C编程』学习笔记(1)

    size_t类型详解: #include <cstddef> #include <iostream> #include <array> int main() { s ...

  4. 二进制安装 mariadb

    默认路径安装MySQL,Mariadb 非常简单,解压,配置权限,修改配置文件基本即可使用:自定义安装稍微有点麻烦,需要修改的地方稍微多点: 下面详细介绍自定义目录,二进制安装mariadb, 使用传 ...

  5. Flink应用案例:How Trackunit leverages Flink to process real-time data from industrial IoT devices

    January 22, 2019Use Cases, Apache Flink Lasse Nedergaard     Recently there has been significant dis ...

  6. Azure导出所有用户权限---powershell命令

      直接运行脚本         #requires -Version 3.0 -Modules AzureRM.Resourcesparam(    [switch]    $GroupRolesB ...

  7. python学习——读取染色体长度(四:获取最长染色体的编号)

    # 读取fasta # 解析每条序列的长度 chr_len = {'chr1':10,'chr2':20,'chr3':30,'chr4':40,'chr5':15} # 求和 total_len = ...

  8. js实现搜索记录列表

    <div class="sy_div28"> <div class="sy_div23"> <span>搜索历史</s ...

  9. form单选框

    form中的单选框: var resultStartRadio = new Ext.form.RadioGroup({ id : 'resultStartRadio', name :"for ...

  10. 什么是CAS机制?(转)

    围绕下面四个点展开叙述: 一:什么是CAS机制? 二:Java当中CAS的底层实现 三:CAS的ABA问题和解决方法 四:java8对CAS的优化 一:什么是CAS机制? 我们先看一段代码: 启动两个 ...