vue设置网页标题title

效果图在最后

一、第一种方法

在项目router文件夹下index.js里

添加标题title

meta: {

title: "xxx"

}

在当前页最下面配置router

router.beforeEach((to, from, next) => {

if (to.meta.title) {

document.title = to.meta.title

}

next()

})

export default router;

二、第二种方法

安装插件，命令行窗口中执行

npm install vue-wechat-title --save

引入插件，在main.js里配置

import VueWechatTitle from 'vue-wechat-title';

Vue.use(VueWechatTitle);

在router文件夹下的index.js中，在每个路由的meta里面加入title

{

path: '/connect',

name: '个人中心',

component: resolve => { require(['@/components/connect/connect'], resolve) },

meta: { title: "个人中心" }

}

在APP.vue下的router-view添加配置

<router-view v-wechat-title="$route.meta.title" />

最后呈现

vue设置网页标题title相关推荐

vue设置页面标题title
每个页面设置相同标题 index.html 直接修改title标签里面的标题 (ps: 这个html文件中也可以引入一些js文件) 每个页面设置不同标题 router - index.js const ...
广州网络营销师吴家成教你网站网页标题title优化设置
相信刚入门的同门们,对于各个页面的关键词设置有一定的困惑,今天广州网络营销吴家成整理了一下关于网站网页标题title优化的设置. 1. 网站各个页面的title不能完全一样 2. 字数 ...
Android微信浏览器标题,微信浏览器设置网页标题
一般设置网页标题只需要document.title = '首页'就可以但是奈何微信浏览器比较特殊只渲染一次便不再更新title 所以可以先创建一个iframe 然后再删除亲测有效 setTitl ...
HTML：如何设置网页标题上的图标
hello,大家好,我是wangzirui32,今天我们来学习如何设置网页标题上的图标,开始学习吧! 其实很简单,先准备一个ico图标文件,再使用link标签即可,代码如下: <!DOCTYPE ...
如何设置网页标题图标 FavIcon
如何设置网页标题图标很多时候我们看到浏览器的选项卡标题前有时会有一个图标,感觉很不错,那么实现的原理就是,在head标签对之间加入<link rel="shortcut icon&q ...
vue设置网页title
最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title.下面总结一下解决的办法: 原先我使用的是document.t ...
angular5+动态设置页面标题title
在实际的开发项目当中,经常需要对访问网页的title进行动态配置,就像这样的东东, 所以今天来记录下怎么动态配置title 一.首先,准备一个 .json的配置文件放置在静态资源assets文件夹下 ...
修改Vue项目网页标题和ico
修改网页标题: 在public下面有一个index.html文件,按图修改即可修改ico: 替换public下面的favicon.ico文件
html浏览器标题闪动,一个网页标题title的闪动提示效果实现思路
通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为提示信息 ...

vue设置网页标题title

vue设置网页标题title相关推荐

最新文章

热门文章