This article was last updated on days ago, the information described in the article may be outdated.
vue-router提供了页面路由功能,可以用来构建单页面应用,在使用vue-router的动态路由匹配的时候,遇到了url变化了,但是页面却没有任何动静的问题,记录一下。
动态路由匹配url变化了,但是组件没有变化是因为vue进行了组件复用,因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。所以我们需要手动进行数据刷新。
我们可以简单的使用watch来监听当前的路由变化,从而实现数据刷新。
import { watch } from "vue"; |
也可以使用2.2中新加的beforeRouteUpdate路由守卫:
export default { |
以上就是vue3中使用vue-router-next来处理动态路由变化导致页面不刷新的方法。
Comments