关于Umijs的事件监听和to属性的绑定

一、利用事件监听修改浏览框的标题

1.首先我们需要从Umi中引入history，然后才可以使用history的方法。

import {history} from 'umi';

2.利用history的history.listen 方法去进行事件监听，我们修改之前可以看看history.listen方法的参数是什么（利用如下代码段在控制台输出）

history.listen(
  (x)=>{
   console.log(x);
  }
);

输出结果如下

 3.经过观察，我们需要依据location下的pathname属性进行对应；所以我们可以用解构赋值取到location；并利用switch...case进行对应，最后通过document.title进行修改

history.listen(
  
  ({location})=>{
    var title='';
  //  console.log(x);
  switch(location.pathname){
    case'/':title='主页';break;
    case'/login':title='登录';break;
  };
   document.title= title;
  }
 
);

二、关于to属性的赋值 

1.关于Link和history.push（）中的to属性，最简单的就是直接绑定路径，例如如下代码

 history.push('/login');
 <Link to="/docs">Docs</Link>

2.利用对象进行传参，

 history.push({pathname:'/login',search:'123'});

pathname进行路径的匹配，serach属性进行字符串拼接，其赋值必须是字符串类型的 

 3.如果我们在定义组件的时候，path下用了Id,就可以在匹配路径的时候替换为任何值

 {path:'posts/:postId',component:'./posts/post'}

即下图代码所示，就可以匹配到指定组件了 

<Link to={{pathname:'/posts/123as'}}>post</Link>