vue之this.$router.push頁面重新整理問題

跳轉當前路由(路由引數有變化)(路由引數無變化此方法無效)

使用this.$router.push進行跳轉時，如果是跳轉當前路由(路由引數有變化)，可在 App.vue 裡的 router-view 標籤設定 key 值。或使用監聽器 watch

<template>
    <div id="app">
        <DataSearch/>
        <keep-alive :exclude="exclude">
            <!--  通過key設定頁面重新整理 規矩
                $route.fullPath 得到路由(包含帶?的引數)
            :key="$route.fullPath" 如果路由改變就重新整理
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
            <router-view :key="$route.fullPath"></router-view>
        </keep-alive>
    </div>
</template>

跳轉當前路由(路由引數也無變化)

可以建立一箇中轉 vue 介面，詳見程式碼：
首先 我們來看主要功能程式碼：

假設我現在想實現：在 datasearch.vue 中設定一個搜尋按鈕，點選搜尋就跳轉至 datadisplay.vue 頁面，並且 datadisplay.vue 頁面會重新重新整理渲染(不管路由是否變化)

datasearch.vue 中

<template>
    <div style="text-align: center;">
        <el-autocomplete
            class="input-with-select"
            style="width: 80%;"
            popper-class="my-autocomplete"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="請輸入內容"
            value-key="value"
            @change="sousuo"
        >
<!--    使用 value-key 屬性，可以指定任意列作為顯示用的        -->

<!--     自定義模板       -->
<!--   比如多個顯示      -->
<!--            <template slot-scope="{ item }">-->
<!--                <div class="name">{{ item.value }}</div>-->
<!--                <span class="addr">{{ item.address }}</span>-->
<!--            </template>-->
            <el-button slot="append" icon="el-icon-search" @click="sousuo" >搜尋</el-button>
        </el-autocomplete>
    </div>
</template>
<script>
    export default {
        name: 'DataSearch',
        data() {
            return {
                state: '',
                content: [],
                fullPath: '',
            };
        },

        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.loadAll();
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 呼叫 callback 返回建議列表的資料
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    // restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())如果元素存在列表中返回下標，否則返回-1
                    console.log(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()));
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);  // 如果大於-1則代表有這個關鍵字
                };
            },

            loadAll() {
                // console.log(this.content);
                return this.content
            },
            sousuo(){
                this.$router.push({
                    path: '/zhongzhuan',
                    query: {state: this.state},

                });
            },
        }
    }
</script>

App.vue 中

<template>
    <div id="app">
        <DataSearch/>
<!--       這裡必須要通過 :exclude 設定 快取黑名單 否則跳轉會出問題       -->
<!--      黑名單中要包含 中轉的 vue 名  和中轉後的 vue 名     -->
        <keep-alive :exclude="exclude">
            <!--  通過key設定頁面重新整理 規矩
                $route.fullPath 得到路由(包含帶?的引數)
            :key="$route.fullPath" 如果路由改變就重新整理
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--              這裡設定或不設定 key 都可以                               -->
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    import DataSearch from './components/datasearch.vue'

    export default {
        name: 'App',
        components: {
            DataSearch
        },
        data() {
            return {
                exclude: ['datadisplay', 'zhongzhuan'],
            }
        },
    }
</script>

zhongzhuan.vue 中

<template>
    <div></div>
</template>

<script>
    export default {
        // 用來中轉，避免路由不變時 頁面不重新整理
        name: "zhongzhuan",

        created() {
            this.pushUrl()
        },
        methods: {
            getData(){
                return this.$route.query.state
            },
            pushUrl(){
                this.$router.push({
                    path: '/datadisplay',
                    query: {state: this.getData()},  // 傳遞引數，放在url?後面的
                })
            }
        },
    }
</script>

datadisplay.vue 中

<template>
    <div>
        <p>content：{{ content }}</p>
    </div>
</template>

<script>
    export default {
        name: "datadisplay",
        data(){
            return {
                content: '123',
            }
        },

        created() {
            this.getData()
        },
        methods: {
            getData(){
                //this.$router 實際上就是全域性路由物件任何頁面都可以呼叫 push(), go()等方法；
                // this.$route  表示當前正在用於跳轉的路由器物件，可以呼叫其name、path、query、params等屬性。
                // 應此需要接受路由引數時，要用this.$route，傳送跳轉路由時要用this.$router
                console.log(this.$route);
                this.content = this.$route.query;
            }
        }
    }

</script>

<style scoped>

</style>

對應程式碼實現圖片：

第一次點選

第二次點選

第三次點選