React 设置网页title

我们可以通过listen监听数据的变化

1）需要在引入路由的时候引入withRouter

import { Switch, Route, NavLink, Redirect, withRouter } from 'react-router-dom';

在暴露的地方吧根组件包裹起来

export default withRouter( App);

2）在constructor中this.props.history.listen中执行location.pathname能够观察到路由的变化

constructor(props) {

super(props);

console.log('app',this.props.history)

this.props.history.listen((location)=>{

console.log(location.pathname)

switch(location.pathname){

case '/list':

document.title="列表";

break;

case '/items':

document.title="内容";

break;

case '/list/users':

document.title="用户";

break;

case '/list/companies':

document.title="公司";

break;

default:break;

}

})

}

React 设置网页title相关推荐

设置网页title标签小图标
第一次设置网页标签小图标,找了很多帖子方法都不管用. 有的说要放到网页根目录,有的说文件名必须要favicon.ico,有的说必须16x16.其实不必这么麻烦. 下面分享我用的方法(本地图片和cdn都 ...
vue 3.0中设置网页title
还有一种使用插件:https://juejin.cn/post/6844904165139808269 单页面应用渲染:https://juejin.cn/post/70228052388431790 ...
vue3.0中设置网页title
1.在public/index.html中设置title <title><%= htmlWebpackPlugin.options.title %></title> ...
vue设置网页title
最近用vue来做一个项目,到结尾的时候发现一个问题:不管开的是哪个组件的路由地址,网页的title都是index.html里面的title.下面总结一下解决的办法: 原先我使用的是document.t ...
如何设置网页title旁边的小图标
正式写一个网页时,title旁边一般会有一个独特的小图标,如何自己写这样一个图标呢? 其实很简单,只需要在html文件中的<head></head>标签里加上: <lin ...
react设置默认props
一般设置props的默认值有两种方式,下面通过一个例子说明一下. <!DOCTYPE html> <html><head><meta charset=&quo ...
浏览器复制网页链接到微信，显示却只有网页title解决
浏览器复制网页链接到微信,显示却只有网页title解决问题复现复制: 粘贴解决一般出现这个问题是因为浏览器设置:目前是eage浏览器,其它浏览器类同: 如果对您有所帮助,给个一键三连吧~~~T ...
【vue】设置网页的标题和图标
[vue]设置网页在浏览器上打开时的标题和图标设置步骤: 在根目录下找到并打开index.html文件: 设置的图标需要存放在static文件夹下(亲测存放在该文件夹下浏览器才能读取到): 在ind ...
HTML：如何设置网页标题上的图标
hello,大家好,我是wangzirui32,今天我们来学习如何设置网页标题上的图标,开始学习吧! 其实很简单,先准备一个ico图标文件,再使用link标签即可,代码如下: <!DOCTYPE ...

React 设置网页title

React 设置网页title相关推荐

最新文章

热门文章