vue之this.$router.push页面刷新问题
作者：凶呆呆
这篇文章主要介绍了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>
对应代码实现图片：
- 第一次点击
- 第二次点击
- 第三次点击
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。