vue之this.$router.push页面刷新问题

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

使用this.$router.push进行跳转时，如果是跳转当前路由(路由参数有变化)，可在 App.vue 里的 router-view 标签设置 key 值。或使用监听器 watch

<template>
    <div id="app">
        <DataSearch/>
        <keep-alive :exclude="exclude">
            

            <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"
        >








            <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/>


        <keep-alive :exclude="exclude">
            



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

对应代码实现图片：

第一次点击

第二次点击

第三次点击