Q-Logo 我的学习笔记分享

Entries for tag "wen-ti-jie-jue-ji-lu"

Vue 相同路由跳转时通过key 属性强制刷新组件

通过this.$router.push 跳转到其他路由,当要跳转到的路由和当前路由相同时(例如都是跳转前后路由都是'/postlist/',但查询参数不同的情况),会出现组件页面不刷新的问题。例如,当前页面是文章列表'/postlist/',需要跳转到某一分类的文章列表'/postlist/?categories=1',跳转代码是这样的

this.$router.push({ path: '/postlist/', query: { categories: cid } }).catch(err => err)

代码执行后,对应的组件本身并没有被刷新。这是vue的默认行为,同样的一个路由,多次push时,页面不会再次刷新和发送请求 。

最简单的办法,就是将上面变化的参数绑定到<router-view/> 中key属性。例如:

<router-view :key="$route.path + $route.query.categories"></router-view>

这样修改之后,this.$router.push时,只要query 的categories参数发生变化,对应的<router-view/> 组件就会被刷新了。

Vue 路由报错Navigating to current location ("/postlist/") is not allowed

局部解决

在报错的push 语句后面增加catch ,例如:

this.$router.push({ path: '/postlist/', query: { categories: cid } }).catch(err => err)

这样修改后,就不会再报上面的错误了。

全局解决

在导入vue-router之后,重写push方法增加catch 。具体就是在src/router/index.js 里面import Router from 'vue-router' 之后进行修改,例如:

import VueRouter from 'vue-router'

const stdPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {

return stdPush.call(this, location).catch(error=> error)

}