# 快捷導航(標簽欄導航)
本功能是響應大家需求，后期加上的，其實本人在公司項目或者個人項目中是不太使用該功能的。以前那些傳統后臺框架往往會包含此功能，由于以前的后臺項目大部分都是多頁面的形式，所以標簽欄導航功能還是具有一定意義的基本，大部分都是基于 iframe 的方式實現的。
但隨著時代的發展，現在的后臺項目幾乎都是 spa(single page web application 單頁面開發)，再使用以前的方案來實現標簽導航顯然是不合適的。
所以目前的方案大致為： 運用`keep-alive`和`router-view`的結合。
代碼:`@/layout/components/AppMain.vue`
~~~
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
~~~
頂部標簽欄導航實際作用相當于 nav 的另一種展現形式，其實說白了都是一個個 router-link，點擊跳轉到相應的頁面。然后我們在來監聽路由`$route`的變化，來判斷當前頁面是否需要重新加載或者已被緩存。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#visitedviews-cachedviews)visitedViews && cachedViews
目前 tags-view 維護了兩個數組。
* visitedViews : 用戶訪問過的頁面 就是標簽欄導航顯示的一個個 tag 數組集合
* cachedViews : 實際 keep-alive 的路由。可以在配置路由的時候通過`meta.noCache`來設置是否需要緩存這個路由 默認都緩存。[配置文檔](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9)注意事項
由于目前`keep-alive`和`router-view`是強耦合的，而且查看文檔和源碼不難發現`keep-alive`的[include](https://cn.vuejs.org/v2/api/#keep-alive)默認是優先匹配組件的**name**，所以在編寫路由 router 和路由對應的 view component 的時候一定要確保 兩者的 name 是完全一致的。(切記 name 命名時候盡量保證唯一性 切記不要和某些組件的命名重復了，不然會遞歸引用最后內存溢出等問題)
**DEMO:**
~~~
//router 路由聲明
{
path: 'create-form',
component: ()=>import('@/views/form/create'),
name: 'createForm',
meta: { title: 'createForm', icon: 'table' }
}
~~~
~~~
//路由對應的view form/create
export default {
name: 'createForm'
}
~~~
一定要保證兩著的名字相同，切記寫重或者寫錯。默認如果不寫 name 就不會被緩存，詳情見[issue](https://github.com/vuejs/vue/issues/6938#issuecomment-345728620)。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E7%BC%93%E5%AD%98%E4%B8%8D%E9%80%82%E5%90%88%E5%9C%BA%E6%99%AF)緩存不適合場景
目前緩存的方案對于某些業務是不適合的，比如文章詳情頁這種`/article/1``/article/2`，他們的路由不同但對應的組件卻是一樣的，所以他們的組件 name 就是一樣的，就如前面提到的，`keep-alive`的 include 只能根據組件名來進行緩存，所以這樣就出問題了。目前有兩種解決方案：
* 不使用 keep-alive 的 include 功能 ，直接是用 keep-alive 緩存所有組件，這樣子是支持前面所說的業務情況的。 前往[@/layout/components/AppMain.vueAppMain.vue](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/layout/components/AppMain.vue)文件下，移除`include`相關代碼即可。當然直接使用 keep-alive 也是有弊端的，他并不能動態的刪除緩存，你最多只能幫它設置一個最大緩存實例的個數 limit。[相關 issue](https://github.com/vuejs/vue/issues/6509)
* 使用 localStorage 等瀏覽器緩存方案，自己進行緩存處理
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#affix-%E5%9B%BA%E9%92%89)Affix 固釘v3.10.0+
當在聲明路由是 添加了 Affix 屬性，則當前`tag`會被固定在`tags-view`中（不可被刪除）。
~~~
{
path: '',
component: Layout,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'Dashboard',
meta: {
title: 'dashboard',
icon: 'dashboard',
noCache: true,
affix: true
}
}
]
}
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html#%E7%A7%BB%E9%99%A4)移除
其實 keep-alive[源碼](https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js)不復雜，但邏輯還是蠻繞的，之前尤大自己修復一個 bug 的時候也不小心搞錯了，連發兩個版本來修復，所以如果沒有標簽導航欄需求的用戶，建議移除此功能。
首先找到`@/layout/components/AppMain.vue`然后移除`keep-alive`
~~~
<template>
<section class="app-main" style="min-height: 100%">
<transition name="fade-transform" mode="out-in">
<router-view></router-view>
</transition>
</section>
</template>
~~~
然后移除整個`@/layout/components/TagsView.vue`文件，并在`@/layout/components/index`和`@/layout/Layout.vue`移除相應的依賴。最后把`@/store/modules/tagsView`相關的代碼刪除即可。
