vue 项目 tab切换共用相同组件不刷新数据问题

由于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