Vue.js學習第十三天——導航守衛、keep-alive、項目相關

Vue.js學習第十三天——導航守衛、keep-alive、項目相關

一. 導航守衛

• 背景：有時候在我們的項目中，需要在跳轉路由的時候進行相關操作，比如有這麼一個需求，當我們跳轉頁面時，頁面的title會隨之發生改變，這時候就要用到我們的導航守衛。導航守衛主要是用來監聽路由的進入和離開，vue-router提供的beforeEach和afterEach的鉤子函數，他們會在路由即將改變前和改變後觸發

• 相關知識：

  1. 生命週期函數
     在Vue中有幾個生命週期函數需要我們瞭解一下
     created(): 組件被創建完成後回調
     destroyed(): 組件被銷燬後回調
     mounted(): 創建組件後(template)掛載在DOM上回調
     updated(): 界面發生更新時回調
     幾個生命週期函數配合我們的全局守衛是比較好用的，上面那個案例我們使用created函數也是可以解決的，但是一旦項目較大的時候，會比較不方便
  2. 全局守衛
     beforeEach()，在源碼中描述它爲guard，也就是守衛
     afterEach 在源碼中描述它爲hook，也就是鉤子
     在以上兩個全局守衛中都需要我們傳遞一個匿名函數進行回調，在上面那個函數也就是router.beforeEach()需要我們往匿名函數中傳遞三個參數(to,from,next)，我們必須在手動調用next(),使它進行路由跳轉，下面一個函數就不需要傳遞next
     to: 代表即將要進入的目標的路由對象
     from: 當前導航即將要離開的路由對象
     next: 調用該方法後才能進入下一個鉤子
  3. 路由獨享的守衛及組件內的守衛
     在vue中還存在有其它的守衛，也就是路由獨享的守衛和組件內的守衛，路由獨享的守衛比如有 beforeEnter,組件內的守衛比如有 beforeRouterEnter及beforeRouterUpdate，這些瞭解即可，用到的時候可以翻閱文檔

• 使用
  在配置路由的index.js中，使用相關的導航守衛即可，這裏使用beforeEach做示範

router.beforeEach((to, from, next) => {
    // to and from are both route objects. must call `next`.
    document.title = to.matched[0].meta.title;
    next(); 
})

meta是在配置路由時加入的數據裏面包含有title，matched[0]的使用時由於存在嵌套路由，所以拿不到首頁的title，所以我們要到matched數組中拿到

const routes = [
    {
        path:'',
        redirect: '/home',
        
    },
    {
        path: '/user/:userId',
        component: user,
        meta: {
            title: '用戶'
        },
        // beforeEnter: (to, from, next) => {
        //     console.log('我是路由獨享守衛');
        //     next();
        // }
    },
    {
        path: '/home',
        component: index,
        children: [
            {
                path: '',
                redirect: 'message'
            },
            {
                path: 'message',
                component: indexMessage
            },
            {
                path: 'news',
                component: indexNews
            }
        ],
        meta: {
            title: '首頁'
        }
    },
    {
        path: '/about',
        component: about,
        meta: {
            title: '關於'
        }
    },
    {
        path: '/profile',
        component: profile,
        meta: {
            title: '檔案'
        }
    }
]

二. keep-alive

• 背景：在我們前幾天的學習中，曾經提過一個需求我們當時沒有實現，也就是在一個頁面中存在嵌套路由，當我們點擊嵌套路由中的那個路由時，跳轉到其它路由，我們希望在跳轉回來時，界面仍然跳轉到之前訪問的嵌套路由的那個頁面，這就需要我們的keep-alive，它是Vue內置的一個組件，可以使被包含的組件保留狀態或避免重新渲染
• 使用：此函數的使用較爲簡單，只需要在<router-view>標籤的外部包一層keep-alive即可，這裏我們結合了組件內的守衛beforeRouteLeave和activated的使用完成了上面那個需求，在首頁這個組件中使用組件內的守衛beforeRouteLeave拿到現在訪問的路徑，當再次訪問此組件時，使用activated手動進行路由跳轉，路徑指定爲使用組件內的守衛拿到的那個路徑即可

activated() {
    this.$router.push(this.path);
},
beforeRouteLeave (to, from, next) {
    this.path = this.$route.path;
    next();
}

• 補充：需要注意的是activated()和deactivated()兩個函數只有在該組件爲保持狀態時，也就是使用了keep-alive時纔有效，否則都是重新創建，並不是處於活躍的。
  另外這個keep-alive標籤中有兩個屬性，include和exclude包含和排除，後面可以跟字符串或者是正則表達式，只有匹配到的組件纔會被緩存或是不緩存，多個組件之間用逗號分隔，不能有空格。例如

<keep-alive exclude="user,profile">
  <router-view></router-view>
</keep-alive>

三. 項目相關(TabBar的封裝)

這是後面需要完成的一個項目中的一個組件，到最後我再把整個項目一起放上來好了