跳转当前路由(路由参数有变化)(路由参数无变化此方法无效)

使用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>

对应代码实现图片：

第一次点击

第二次点击

第三次点击