routerpush不跳转怎么解决?
你的问题可能是如何“刷新”当前页面
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。
因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。
不过,这也意味着组件的生命周期钩子不会再被调用。
复用组件时,想对路由参数的变化作出响应的话,$route.push无效,你可以简单地 watch (监测变化) $route 对象:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
如何是刷新当前页面的话可使用先push到一个空页再push回来,但是这个方案回导致一个空白效果,常用的是再app.vue定义一个reload方法,再子页面中调用
// app.vue
<template>
<router-view v-if="isRouterAlive"></router-view>
</template>
<script>
export default {
name: "App",
provide() {
return {
routerReload: this.reload
};
},
data() {
return {
isRouterAlive: true
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true));
}
}
};
</script>
// 页面
export default {
inject: ["routerReload"],
methods: {
reload(){
this.routerReload()
}
}
}
Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有