Vue解决路由切换刷新问题

法一

1.App.vue

<!-- App.vue根组件代码 -->
<template>
  <div class="app">
      <div class="content">
      	   <router-view v-if="routerAlive"></router-view>
      </div>
  </div>
</template>
 
<script>
    export default{
	data(){
	    return {
		routerAlive:true
	    }
	},
	provide(){    //在父组件中创建属性
            return {
                routerRefresh: this.routerRefresh
            }
        },
	methods:{
	    routerRefresh(){
	        this.routerAlive = false;
		this.$nextTick(()=>{
		    this.routerAlive = true;
		});
	    }
	}
    }
</script>

2.use.vue

<style lang="scss" scoped>
    .history-casting{
        background: #f7f7f7;
        padding: 10px 14px;
        .history-casting-box{
            background: #fff;
            padding: 11px 14px 18px 15.5px;
            .history-casting-title{
                font-size: 16px;
                padding: 3px 0;
            }
            .history-casting-list{
                color: #33499C;
                font-size: 12px;
                .history-casting-item{
                    padding: 6px 0;
                }
                .active{
                    color: rgb(185, 9, 1);
                    font-weight: bold;
                }
            }
        }
    }
</style>

<template>
    <div class="history-casting">
        <div class="history-casting-box">
            <div class="history-casting-title">
                历史播报
            </div>
            <div class="history-casting-list">
                <div  class="history-casting-item" v-for="(item,index) in historyCastingList" 
                    :key="index" :class="{'active':ind === index}" @click="changeBgc(index)">
                    {{item}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//Vuex公共状态动作
export default {
	inject:['routerRefresh'],   //在子组件中注入在父组件中出创建的属性
    props:{
        //微信用户ID
        openid:{
            type:String,
        },
        //是否是历史数据
        historyid:{
            type:String
        },
        //时间戳
        todaytime:{
            type:String
        },
        //理财经理ID
        userid:{
            type:String,
        },
        //是否为分享文章
        isShare:{
            type:String,
        },
        //小程序
        isWXApplet:{
            type:String
        },
        //播报id
        fieldid:{
            type:String
        },
    },
    data() {
        return {
            historyCastingList:[
                '晚间播报（2019年8月14日星期日 8点）',
                '晚间播报（2019年8月14日星期日 9点）',
                '晚间播报（2019年8月14日星期日 10点）',
                '晚间播报（2019年8月14日星期日 11点）',
                '晚间播报（2019年8月14日星期日 12点）',
                '晚间播报（2019年8月14日星期日 13点）',
                '晚间播报（2019年8月14日星期日 14点）',
            ],
            ind: 0
        };
    },
    components: {
        
    },
    computed: {
        
    },
    methods: {
        changeBgc: function (index) {
            this.ind = index;
            this.$router.push({
                path:
                    "/eveningBroadcasting/" +
                    this.todaytime +
                    "/" +
                    this.userid +
                    "/" +
                    index +
                    "/" +
                    this.openid +
                    "/" +
                    this.isShare
            });
            //使用路由刷新
		    this.routerRefresh();
        }
        
    },
    created(){
        
    },
    mounted(){
        
    },
}
</script>

法二

App.vue

<!-- App.vue根组件代码 -->
<template>
  <div class="app">
      <div class="content">
      	   <router-view :key="key"></router-view>
      </div>
  </div>
</template>
 
<script>
    export default{
	    data(){
	        return {
 
		    }
	    },
	    computed:{
	        key(){
	            return this.$route.path + Math.random();
	        }
	    }
    }
</script>

给<router-view :key="key"></router-view>增加一个不同:key值，这样vue就会识别这是不同的<router-view>了。 这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定一个key值。如果我从page1跳到page2不同组件的话，我其实是不用担心组件更新问题的。