处理 Vue 单页面应用 SEO
由于在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的更多相关文章
- Vue 单页面应用 SEO SPA single page application advantages and disadvantages
处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- vue单页面处理SEO问题
设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...
- 在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- 处理 Vue 单页面 SEO 的另一种思路
vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...
- 基于angularJs的单页面应用seo优化及可抓取方案原理分析
公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [one day one question] Vue单页面应用如何保证F5强刷不清空数据
问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...
随机推荐
- Django学习之十一:真正理解Django的路由分发和反解url原理
目录 URL Dispatcher 简介 模式概念 对比URLPattern 与 URLResolver (多态的体现) 构建子路由几种方式 反解url算法逻辑 URL Dispatcher 简介 d ...
- matlab中的实时音频
音频系统工具箱™针对实时音频处理进行了优化.audioDeviceReader, audioDeviceWriter, audioPlayerRecorder, dsp.AudioFileReader ...
- 好代码是管出来的——使用GitHub
前面的文章介绍了Git的基本概念和用法,本文则是基于GitHub的一个实践介绍,主要内容有: GitHub简介 个人与组织 仓库的创建与维护 Fork与pull request 小结 GitHub简介 ...
- 评估指标【交叉验证&ROC曲线】
# -*- coding: utf-8 -*- """ Created on Mon Sep 10 11:21:27 2018 @author: zhen "& ...
- sqlserver 2014使用时有Cannot find one or more components
好久没用sqlserver,今天打开却出现了一个错误,Cannot find one or more components,令人头疼.在启动Microsoft SQL Server Managemen ...
- emacs 只读打开文件
emacs 只读打开文件 : C-x C-r emacs 让buffer区变成只读 : C-x C-q emacs 让只读buffer区变成可以保存修改 : C-x C-q
- js坚持不懈之15:修改html内容和属性的方法
1. 修改 HTML 内容 <!DOCTYPE html> <html> <body> <p id = "change">原始内容& ...
- Git + Docker + Jenkins自动化部署web到Linux(Centos)
1.把代码托管到Github上 2.安装Docker 3.安装Jenkins 4.在项目中编写Dockerfile.publish.sh (1)Dockerfile内容 # 基于dotnet基础环境构 ...
- StringUtils工具类常用方法详解
StringUtils 常用方法 1.isEmpty(String str) 是否为空,空格字符为false2.isNotEmpty(String str) 是否为非空,空格字符为true3.isBl ...
- CentOS7.x搭建时间同步服务器
关于chrony Chrony是一个开源的自由软件,像CentOS7或基于RHEL 7操作系统,已经是默认服务,默认配置文件在 /etc/chrony.conf 它能保持系统时间与时间服务器(NTP) ...