快捷导航(标签栏导航)
但随着时代的发展,现在的后台项目几乎都是 spa(single page web application 单页面开发),再使用以前的方案来实现标签导航显然是不合适的。
所以目前的方案大致为: 运用 和 router-view
的结合。
代码: @/layout/components/AppMain.vue
顶部标签栏导航实际作用相当于 nav 的另一种展现形式,其实说白了都是一个个 router-link,点击跳转到相应的页面。然后我们再来监听路由 $route
的变化,来判断当前页面是否需要重新加载或者已被缓存。
- cachedViews : 实际 keep-alive 的路由。可以在配置路由的时候通过
meta.noCache
来设置是否需要缓存这个路由 默认都缓存。
由于目前 keep-alive
和 是强耦合的,而且查看文档和源码不难发现 keep-alive
的 include 默认是优先匹配组件的 name ,所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性 切记不要和某些组件的命名重复了,不然会递归引用最后内存溢出等问题)
DEMO:
一定要保证两者的名字相同,切记写重或者写错。默认如果不写 name 就不会被缓存,详情见。
目前缓存的方案对于某些业务是不适合的,比如文章详情页这种 /article/1
/article/2
,他们的路由不同但对应的组件却是一样的,所以他们的组件 name 就是一样的,就如前面提到的,keep-alive
的 include 只能根据组件名来进行缓存,所以这样就出问题了。目前有两种解决方案:
当在声明路由是 添加了 Affix 属性,则当前会被固定在 tags-view
中(不可被删除)。
其实 keep-alive 源码不复杂,但逻辑还是蛮绕的,之前尤大自己修复一个 bug 的时候也不小心搞错了,连发两个版本来修复,所以如果没有标签导航栏需求的用户,建议移除此功能。
然后移除整个 @/layout/components/TagsView.vue
文件,并在@/layout/components/index
和 移除相应的依赖。最后把 @/store/modules/tagsView
相关的代码删除即可。