vue之this.$router.push頁面刷新問題

更新時間：2023年12月04日 14:46:09 作者：兇呆呆

這篇文章主要介紹了vue之this.$router.push頁面刷新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

跳轉(zhuǎn)當(dāng)前路由(路由參數(shù)有變化)(路由參數(shù)無變化此方法無效)

使用this.$router.push進行跳轉(zhuǎn)時，如果是跳轉(zhuǎn)當(dāng)前路由(路由參數(shù)有變化)，可在 App.vue 里的 router-view 標(biāo)簽設(shè)置 key 值。

或使用監(jiān)聽器 watch

<template>
    <div id="app">
        <DataSearch/>
        <keep-alive :exclude="exclude">
            <!--  通過key設(shè)置頁面刷新 規(guī)矩
                $route.fullPath 得到路由(包含帶?的參數(shù))
            :key="$route.fullPath" 如果路由改變就刷新
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
            <router-view :key="$route.fullPath"></router-view>
        </keep-alive>
    </div>
</template>

跳轉(zhuǎn)當(dāng)前路由(路由參數(shù)也無變化)

可以創(chuàng)建一個中轉(zhuǎn) vue 界面，詳見代碼：

首先我們來看主要功能代碼：

假設(shè)我現(xiàn)在想實現(xiàn)：在 datasearch.vue 中設(shè)置一個搜索按鈕，點擊搜索就跳轉(zhuǎn)至 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="請輸入內(nèi)容"
            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;
                // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    // restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())如果元素存在列表中返回下標(biāo)，否則返回-1
                    console.log(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()));
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);  // 如果大于-1則代表有這個關(guān)鍵字
                };
            },

            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 設(shè)置 緩存黑名單 否則跳轉(zhuǎn)會出問題       -->
<!--      黑名單中要包含 中轉(zhuǎn)的 vue 名  和中轉(zhuǎn)后的 vue 名     -->
        <keep-alive :exclude="exclude">
            <!--  通過key設(shè)置頁面刷新 規(guī)矩
                $route.fullPath 得到路由(包含帶?的參數(shù))
            :key="$route.fullPath" 如果路由改變就刷新
                     -->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--            <router-view :key="$route.fullPath"></router-view>-->
<!--              這里設(shè)置或不設(shè)置 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 {
        // 用來中轉(zhuǎn)，避免路由不變時 頁面不刷新
        name: "zhongzhuan",

        created() {
            this.pushUrl()
        },
        methods: {
            getData(){
                return this.$route.query.state
            },
            pushUrl(){
                this.$router.push({
                    path: '/datadisplay',
                    query: {state: this.getData()},  // 傳遞參數(shù)，放在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 實際上就是全局路由對象任何頁面都可以調(diào)用 push(), go()等方法；
                // this.$route  表示當(dāng)前正在用于跳轉(zhuǎn)的路由器對象，可以調(diào)用其name、path、query、params等屬性。
                // 應(yīng)此需要接受路由參數(shù)時，要用this.$route，發(fā)送跳轉(zhuǎn)路由時要用this.$router
                console.log(this.$route);
                this.content = this.$route.query;
            }
        }
    }

</script>

<style scoped>

</style>

對應(yīng)代碼實現(xiàn)圖片：