由于在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. React-组件的生命周期详解(含React16版本)

    在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui.组成一个简单的"状态机". react的生命周期三个阶段: Mounting ...

  2. 【esri-loader】帮助文档翻译 part2 用法

    esri-loader怎么用?看完不要太清楚. [未完待续]!!! Q1: 在哪里用? 这是我最疑惑的问题之一,我知道要用esri-loader,肯定是某条js导入语句起作用的,但是你得告诉我写在哪里 ...

  3. OPPO realme 2在哪里打开Usb调试模式的简单步骤

    每当我们使用PC通过数据线链接到安卓手机的时候,如果手机没有开启USB调试模式,PC则没能成功识别我们的手机,这时我们需要找解决方法将手机的USB调试模式开启,下文我们记录一下OPPO realme ...

  4. Swift中 删除Array的元素对象

    Swift中Array的删除对象 在Swift中数组Array没有removeObject的方法 1.找到下标 let model_index = selectedArray.index(where: ...

  5. Linux学习历程——Centos 7 chmod命令

    一.命令介绍 chmod 命令,是Linux管理员最常用的命令之一,用于修改文件或目录的访问权限. Linux系统中,每一个文件都有文件所有者和所属群组,并且规定文件的所有者,所属群组,以及其他人队问 ...

  6. Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

    在Node.js中,我们可以通过qr-image包直接在后台生成二维码图片,使用方法很简单: var qr = require('qr-image'); exports.createQRImage = ...

  7. python一直放弃到双数的day10

    今天接着来说那个新的大知识点,函数,函数中是可以传递一个数值的,这个数值简称为参数,对于参数,他可以是任意个数和任意类型(数据类型).参数的其中一种有位置传参,函数中的参数有几个,那么就要传入几个,传 ...

  8. 作业2:分布式版本控制系统Git的安装与使用

    1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...

  9. destruct析构函数里操作文件出现的问题

    这几天要给后台加一个记录操作日志的功能,可是项目已经开发完了不可能再去改以前的代码了,那有什么快捷的方法呢? 项目使用的ThinkPHP3.23 ,为了方便权限控制,后台控制器结构为:普通控制器 ex ...

  10. scala的多种集合的使用(3)之遍历集合的方法

    遍历集合的方法 1.用foreach循环遍历一个集合 foreach接收一个函数作为参数.定义的函数应该接收一个元素作为输入参数,然后不要返回任何的东西.输入的参数的类型应该匹配集合中的类型.随着fo ...