Vue:单页面应用动态设置title

vue开发的单页面应用，需要在进入不同路由时动态改变title

vue-cli 3 构建的项目

1.修改public>index.html

修改title标签id为:public_title，后面在路由钩子拦截预处理时会用到

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title id="public_title">xxx系统</title></head><body><noscript><strong>We're sorry but website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

2.routes配置增加meta.pagetitle信息

routes: [{path: '/error404',name: 'error404',meta: {pagetitle: '404 Error'},component: import('@/views/common/error-page-404.vue')}]

3.路由钩子拦截，预处理统一设置title

用到Vue路由钩子：beforeEach，通过对象to获取到即将进入的路由的标题（meta.pagetitle），document.getElementById(‘public_title’).innerHTML动态修改标题

/*** 全局路由钩子* to: 将要进入的，路由对象* from:正要离开，路由对象*/
router.beforeEach((to, from, next) => {document.getElementById('public_title').innerHTML = to.meta.pagetitle === undefined ? 'xxx系统' : to.meta.pagetitlenext();
})

Vue:单页面应用动态设置title相关推荐

vue单页面背景颜色设置
有时我们会遇到单独改变某个组件的背景填充色,而我们已经在index.html中引入了公用的css样式(body中设置了背景色),由于单个组件没有body标签,于是要修改单个组件的背景色只需添加如下代码 ...
vue 单页面背景图片设置
html 部分,background 是放背景图片的div,front是放其他的div <div class="background"><img :src=&qu ...
vue seo管理 vue-meta-info 动态设置meta和title
使用 vue-meta-info 配置title和meta按照以下步骤 1.安装 yarn: yarn add vue-meta-info npm: npm install vue-meta-info ...
php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
seo需要处理页面html,详解处理Vue单页面应用SEO的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...

Vue:单页面应用动态设置title

1.修改public>index.html

2.routes配置增加meta.pagetitle信息

3.路由钩子拦截，预处理统一设置title

Vue:单页面应用动态设置title相关推荐

最新文章

热门文章