router.js

import Index from './routes/Index/index';
import UserAccount from './routes/UserAccount/index';
const Root = () =>(
    <Router history={history} >
        <div style={{ height:'100%' }}>
            <Route exact path='/' component={Login} />
            <Route path="/sem" component={Layout}>
                <Route path="Index" component={Index} />
                <Route path="UserAccount" component={UserAccount} />
                <Route path="UserAccountForMaster" component={UserAccount} />
                <Route path="UserAccountForNormal" component={UserAccount} />
            </Route>
        </div>
    </Router>
ReactDOM.render(<Root />,document.getElementById('root'))
UserAccount.js
 
import React from 'react';
export default class UserAccount extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
           dataList:[]
    componentWillMount () {
    componentDidMount () {
        sendFetch('http://www.baidu.com', {type:1}, 'GET')
        .then(data=>{
            this.setState({ listData:data.data.lists })
    render () {
        return (
                <button>你好，祝你幸福，再见~</button>
                        listData.length !== 0 ? listData.map((item,index)=>{
                            return <li>{item.name}</li>
                        }) : null
            </div>
以上情况当路由切换的时候，组件UserAccount只是重新render，并不重新构建，如果需要路由切换的时候，组件重新构建，重新完成一次生命周期，则需要给组件加上key；方法如下：
 
·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····这是解决办法·····
 
路由不需要修改，我们只需要修改组件：
 
上面提到需要给组件加上key，让router的path属性（params）指向组件的key，就可以实现，组件的重构。
 
UserAccount.js
 
import React from 'react';
// 注意这里 
class UserAccount extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
           dataList:[]
    componentWillMount () {
    componentDidMount () {
        sendFetch('http://www.baidu.com', {type:1}, 'GET')
        .then(data=>{
            this.setState({ listData:data.data.lists })
    render () {
        return (
                <button>你好，祝你幸福，再见~</button>
                        listData.length !== 0 ? listData.map((item,index)=>{
                            return <li>{item.name}</li>
                        }) : null
            </div>
// 注意这里
export default (props)=><UserAccount {...props} key={props.location.pathname} />
这里的props.location.pathname就是router的path属性的值，这样就实现了，router的path属性指向组件的key。
 
这样切换路由的时候，即可完成组件的刷新（重构）。
                                    当多个路由使用同一个组件的时候，切换路由的时候，页面组件不重新构建，页面也不刷新当切换路由的时候，只是重新render，并不重新构建，如果需要路由切换的时候，组件重新构建，重新完成一次生命周期，则需要给组件加上key
路由不需要修改，我们只需要修改组件，给组件加上key，让router的path属性（params）指向组件的key，就可以...
                                    vue elementui同一页面多次引用同一组件(导致 组件只显示一个,且数据覆盖)
1:需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件;
2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据;
3:解决问题的关键:
//1.-----页面调用子组件,实例化两个
//第一处调用子组件
<pagination @get-list="getpagequery"  :...
                                    第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了&lt;keep-alive&gt;：&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;keep-alive&gt;
      &lt;router-view&gt;&lt;/..
                                    多个页面共用同一个组件
当多个路由公用同一个组件时，切换路由不会重新触发该组件页面的钩子函数。 为了重新触发钩子函数。获取最新数据。有两种方式：
方法1：假如父组件下的两个子组件A ,B需要公用同一个组件，在父组件中，router-view中添加key ,并保证key值具有类似ID值的唯一性。
   这样就能实现，进行相应的子组件路由，会根据相应的key值触发相应子组件的钩子函数。
方法2：通过监听路由的变化，来处理数据。
在router-view里添加key控制：
这样的弊端是如果router-
                                    最近正好遇到一个问题，修改用户的头像，修改后再进入用户主页，发现改了之后即使数据变了。。页面也不会重新渲染。。。下面提供集中解决方案来给予大家参考：1. 可以在刷新的页面定义一个参数, 这样每次都会渲染出不同的页面：        route 实例化命名配置：        {
            // 用户信息
            path: '/accountDetail/:randK...
先说原理，这个重复引用的组件虽然一样，但是二者在被创建的时候各自走了一遍生命周期，所以变量之间不冲突。
首先在引用组件中新增一个props，这里命名为spareId,用来区分二者。
然后父组件传值：
                                    mounted() {
    let start = window.location.href.lastIndexOf("/");
    let path = window.location.href.slice(start + 1);
    if (path == "path1") {
      console.log("path1");
      this.getmessage("...