由于Vue会复用相同的组件, 将不在执行created, mounted之类的钩子, 这时候就需要通过设置路由钩子beforeRouteUpdate或者监听$route的变化来执行相关方法更新数据。如果不想要复用组件,可以根据需要进行如下设置。
1.设置router-view 的key为$route.path
从/user/foo => /user/bar, 由于这两个路由的$route.path并不一样, 所以组件被强制不复用,组件会执行created与 mounted中的内容。
从/user?name=foo => /user?name=bar, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件。
2.设置router-view 的key为$route.fullPath
从/user/foo => /user/bar 或者 /user?name=foo => /user?name=bar , 由相应前后跳转的两个路由的$route.fullPath并不一样, 所以组件被强制不复用。这也意味着组件的生命周期钩子会再次被调用,created与 mounted中的内容会被执行。
<router-view>不设置key
首先,vue会复用相同组件,对于路由有多个子路由来说,当在子路由来回切换时,会导致页面不刷新的问题,这是因为不再执行created和mounted这些钩子函数,可以通过watch来监听$route的变化从而加载不同的组件
<router-view :key="$route.path">
通过设置key值为$route.path,因为子路由的path不同,从而避免了组件复用,子路由间来回切换时,页面都会重新加载.
遇到的问题
在后台系统中,点击侧导航菜单子菜单时,设置了:key="$route.path"会导致菜单关闭又打开,视觉效果不好,不设置key就实现组件复用,不会出现那个bug