使用vue-router鉤子函數(shù)怎么實現(xiàn)路由守衛(wèi)

這篇文章給大家介紹使用vue-router鉤子函數(shù)怎么實現(xiàn)路由守衛(wèi)，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

全局鉤子函數(shù)

beforeEach：

beforeEach一共接收三個參數(shù)，分別是to、from、next；to：即將進入的路由對象；from：正要離開的路由對象；next：路由的控制參數(shù)；

next一共有四種調(diào)用方式：

next()：一切正常調(diào)用這個方法進入下一個鉤子；

next(false)：取消路由導(dǎo)航，這時的url顯示的是正要離開的路由地址；

next('/login')：當(dāng)前路由被終止，進入一個新的路由導(dǎo)航（路由地址可以自由指定）

next(error)：路由導(dǎo)航終止并且錯誤會被傳遞到router.onError()注冊過的回調(diào)中；

我們一般是用全局鉤子來控制權(quán)限，像什么進頁面沒有登錄就跳登錄頁，需要用戶達到什么級別才能訪問當(dāng)前頁面都是屬于頁面權(quán)限控制，都是可以通過beforeEach鉤子函數(shù)來實現(xiàn)：

main.js（全局鉤子函數(shù)我們一般是在main.js中進行書寫）：

// 進入路由前方法勾子
router.beforeEach((to, from, next) => {
  console.log(to, '前置第一個參數(shù)')
  console.log(from, '前置第二個參數(shù)')
  console.log(next, '前置第三個參數(shù)')
  /
    to 目標(biāo)路由
    from 源路由
    next 跳轉(zhuǎn)到下一個路由
  */
//這里暫時用local、storange來簡單模擬驗證權(quán)限
  if (window.localstorange.getItem("token")) {
    // 如果存在，則直接跳轉(zhuǎn)到對應(yīng)路由
     next();
  } else {
    // 如果不存在，則跳轉(zhuǎn)到登錄頁
    next('/login');
  }
});

AfterEach：

AfterEach和beforeEach一樣都是屬于全局守衛(wèi)鉤子，都是在main.js中進行調(diào)用；其中AfterEach比beforeEach少一個next參數(shù)；

from：正要離開的路由對象；

afterEach()我們一般用來重置頁面滾動條位置：

假如我們有一個頁面很長，滾動后其中的某個位置后跳轉(zhuǎn)，這時新的頁面的滾動條位置就會在上一個頁面停留的位置；這個時候我們就可以利用afterEach進行重置：

//全局路由改變后鉤子
router.afterEach((to, from) => {
  //將滾動條恢復(fù)到最頂端
  window.scrollTo(0, 0);
})

路由獨享的鉤子函數(shù)

beforeEneter：

路由獨享顧名思義就是指定的路由才有這些鉤子函數(shù)，通常這類路由獨享的鉤子函數(shù)我們是在路由配置文件中進行配置，只能設(shè)置改變前的鉤子，不能設(shè)置改變后的鉤子

const router=new VueRouter({
    routes
});
const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ],
//路由獨享的鉤子函數(shù)
        beforeEnter:(to,from,next)=>{
            console.log(to);
            console.log(from);
            next(false);
        }
    },

上述代碼理解為只有進入/page1才會觸發(fā)beforeEnter這個鉤子，如果進入其他頁面，是不觸發(fā)的；

組件內(nèi)的鉤子函數(shù)

beforeRouteEnter(to,from,next)：

在路由進入前調(diào)用，因為此時的vue實例還沒有創(chuàng)建，所以beforeEnter是唯一一個不能使用this的鉤子函數(shù)；

to:即將要進入的路由對象；

from：正要離開的路由對象；

next：路由控制參數(shù)

beforeRouteUpdate(to,from,next):

在路由發(fā)生修改的時候進行調(diào)用，比如我們上一篇文章講到的動態(tài)路由傳參，這種情況我們的beforeRouteUpdate也是會被調(diào)用的；

 to:即將要進入的路由對象；

from：正要離開的路由對象；

next：路由控制參數(shù)；

beforeRouteLeave(to,from,next):

在路由離開該組件時調(diào)用；

to:即將要進入的路由對象；

from：正要離開的路由對象；

next：路由控制參數(shù)

注意：beforeRouteEnter因為觸發(fā)的時候vue實例還沒有創(chuàng)建，所以這個鉤子函數(shù)中不能使用this，而beforeRouteUpdate和beforeRouteLeave都是可以訪問到實例的，因為當(dāng)這兩個函數(shù)觸發(fā)的時候?qū)嵗家呀?jīng)被創(chuàng)建了；

當(dāng)調(diào)用組件內(nèi)的鉤子函數(shù)的時候，我們通常是在組件內(nèi)部進行調(diào)用，舉個例子：

<template>
    <div>
        <h2 id="h2">主頁</h2>
        <p>
            <router-link to="/page1/phone">手機</router-link>
            <router-link to="/page1/computer">電腦</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
    //路由進入前調(diào)用
  beforeRouteEnter (to, from, next) {
    window.document.title  = "歡迎";
    next();
  },
    //路由修改時調(diào)用
  beforeRouteUpdate(to,from,next){

  },
   //路由離開時調(diào)用
  beforeRouteLeave(to,from,next){

  },
        data () {
            return {
                msg: "我是page1組件"
            }
        },
    }
</script>

關(guān)于使用vue-router鉤子函數(shù)怎么實現(xiàn)路由守衛(wèi)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。