<router-view>不设置key

首先,vue会复用相同组件,对于路由有多个子路由来说,当在子路由来回切换时,会导致页面不刷新的问题,这是因为不再执行created和mounted这些钩子函数,可以通过watch来监听$route的变化从而加载不同的组件

<router-view :key="$route.path">

通过设置key值为$route.path,因为子路由的path不同,从而避免了组件复用,子路由间来回切换时,页面都会重新加载.

遇到的问题
在后台系统中,点击侧导航菜单子菜单时,设置了:key="$route.path"会导致菜单关闭又打开,视觉效果不好,不设置key就实现组件复用,不会出现那个bug

Logo

前往低代码交流专区

更多推荐