首頁 > 軟體

Vue守衛零基礎介紹

2022-10-02 14:00:16

1. 全域性導航守衛

語法：

# 守衛引數
    + to: Route: 即將要進入的目標 路由物件
    + from: Route: 當前導航正要離開的路由
    + next: Function: 一定要呼叫該next方法，否則路由不向下執行，頁面空白。

# 全域性前置守衛，當一個導航觸發時，立刻觸發前置守衛，
router.beforeEach((to, from, next) => {
  // ...
  next()
})

//全域性解析守衛，等到路由獨享守衛和元件內守衛都解析完畢後執行
router.beforeResolve((to, from, next) => {
  // ...
  next()
})

# 全域性後置勾點，全部守衛執行完畢後執行
// 此勾點不會接受 next 函數也不會改變導航本身
router.afterEach((to, from) => {
  // ...
})

全域性導航守衛執行順序：

news.js（這個檔案是從 index.js 檔案中抽取拆分出來的，最終要被引入到 insex.js 檔案中）：

import News from '@/views/News'
import Detail from '@/views/Detail'
import Login from '@/views/Login'
const routes = [
    {
        path: '/news',
        component: News,
    },
    {
        path: '/news/:id',
        name: 'xw',
        component: Detail,
    },
    {
        // 這是登入頁
        path: '/login',
        component: Login,
    }
]
export default routes

index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import news from './routes/news'
// 以外掛的方式新增
Vue.use(VueRouter)
// 範例化路由物件及設定路由表
const routes = [...news]
const router = new VueRouter({
  // 路由模式
  mode: 'history',
  // 路由規則表
  routes
})
// 全域性守衛 每次切換頁面都會執行到
// 前置
router.beforeEach((to, from, next) => {
  console.log('全域性 --- beforeEach')
  next()
})
// 解析
router.beforeResolve((to, from, next) => {
  console.log('全域性 --- beforeResolve')
  next()
})
// 後置
router.afterEach((to, from) => {
  console.log('全域性 --- afterEach')
})
export default router

登入頁（index.vue）：

<template>
  <div>
    <button>登入使用者</button>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped></style>

現在我們有這樣一個需求，使用者只有在登入成功之後，才能存取新聞頁面，該怎麼做呢？

index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import news from './routes/news'
// 以外掛的方式新增
Vue.use(VueRouter)
// 範例化路由物件及設定路由表
const routes = [...news]
const router = new VueRouter({
  // 路由模式
  mode: 'history',
  // 路由規則表
  routes
})
// 用全域性前置守衛判斷使用者是否登入
router.beforeEach((to, from, next) => {
  // 在使用導航守衛來驗證使用者是否登入，一定要把登入頁面路由排除掉,防止死迴圈
  // 如果沒有在本地儲存中獲取到token值，並且即將跳轉的頁面不是登入頁
  if (!sessionStorage.getItem('token') && to.path != '/login') {
    // 到登入頁面
    // next('/login')
    // replace: true表示跳轉到登入頁面後，不允許回退
    next({ path: '/login', replace: true })
  } else {
    next()
  }
})
export default router

2. 路由獨享守衛

語法：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
		next()
      }
    }
  ]
})

使用：

news.js（這個檔案是從 index.js 檔案中抽取拆分出來的，最終要被引入到 insex.js 檔案中）：

import News from '@/views/News'
import Detail from '@/views/Detail'
import Login from '@/views/Login'
const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    path: '/news/:id',
    name: 'xw',
    component: Detail,
  },
    {
      // 這是登入頁
      path: '/login',
      component: Login,
      // 路由獨享守衛 
      // 只有當前的路由規則才生效,比如登入頁面的路由獨享守衛在進入新聞頁面時就不會生效
      // 路由獨享守衛在每次進入到當前路由頁面時都會執行
      beforeEnter: (to, from, next) => {
        console.log('路由獨享守衛 ==login -- --- beforeEnter')
        next()
      }
    }
]
export default routes

3. 元件內守衛

語法：

你可以在路由元件內直接定義以下路由導航守衛：

const Foo = {
  template: `...`,
  //執行完全域性前置守衛和路由獨享守衛，就會執行當前函數
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件範例 `this`
    // 因為當守衛執行前，元件範例還沒被建立
  },
  //動態路由引數改變就會觸發這個函數
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件範例會被複用。而這個勾點就會在這個情況下被呼叫。
    // 可以存取元件範例 `this`
  },
  //離開當前頁面時呼叫
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以存取元件範例 `this`
  }
}

所有守衛和生命週期函數的執行順序：

news.js（這個檔案是從 index.js 檔案中抽取拆分出來的，最終要被引入到 insex.js 檔案中）：

import News from '@/views/News'
import Detail from '@/views/Detail'
import Login from '@/views/Login'
const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    path: '/news/:id',
    name: 'xw',
    component: Detail,
    beforeEnter: (to, from, next) => {
      console.log('路由獨享守衛 -- detail --- beforeEnter')
      next()
    }
  },
    {
      // 這是登入頁
      path: '/login',
      component: Login,
      // 路由獨享守衛 
      // 只有當前的路由規則才生效,比如登入頁面的路由獨享守衛在進入新聞頁面時就不會生效
      // 路由獨享守衛在每次進入到當前路由頁面時都會執行
      beforeEnter: (to, from, next) => {
        console.log('路由獨享守衛 ==login -- --- beforeEnter')
        next()
      },
    }
]
export default routes

詳情頁（index.vue）：

<template>
  <div>
    <h3>新聞詳情頁</h3>
  </div>
</template>
<script>
export default {
  // 當路由存取到此元件時，執行此勾點函數
  beforeRouteEnter(to, from, next) {
    console.log("元件 --- beforeRouteEnter");
    next();
  },
  // 離開當前路由元件
  beforeRouteLeave(to, from, next) {
    console.log("元件 --- beforeRouteLeave");
    next();
  },
  // 路由引數的改變，觸發路由元件守衛
  beforeRouteUpdate(to, from, next) {
    console.log(this);
    console.log("元件 --- beforeRouteUpdate");
    next();
  },
  // 和生命週期函數比較以下執行順序
  // 所有路由解析完畢以後,才開始執行生命週期函數
  beforeCreate() {
    console.log('元件 === beforeCreate')
  },
  beforeDestroy() {
    console.log('元件 === beforeDestroy')
  },
  destroyed() {
    console.log('元件 === destroyed')
  },
};
</script>
<style lang="scss" scoped></style>

下面我們來看beforeRouteUpdate函數什麼時候執行。

詳情頁（index.vue）：

<template>
  <div>
    <h3>新聞詳情頁</h3>
    <router-link to="/news/1">111</router-link><br />
    <router-link to="/news/2">222</router-link><br />
    <router-link to="/news/3">333</router-link>
  </div>
</template>
<script>
export default {
  // 當路由存取到此元件時，執行此勾點函數
  beforeRouteEnter(to, from, next) {
    console.log("元件 --- beforeRouteEnter");
    next();
  },
  // 離開當前路由元件
  beforeRouteLeave(to, from, next) {
    console.log("元件 --- beforeRouteLeave");
    next();
  };
  // 路由引數的改變，觸發路由元件守衛
  // 可以用來監聽頁面是否發生變化
  beforeRouteUpdate(to, from, next) {
    // console.log(this);
    console.log("元件 --- beforeRouteUpdate");
    next();
  },
  // 監聽器也可以用來監聽頁面是否發生變化
  // watch:{
  //   '$route'(n){
  //     console.log('watch --- ' ,n);
  //   }
  // },
  // 和生命週期函數比較以下執行順序
  // 所有路由解析完畢以後,才開始執行生命週期函數
  beforeCreate() {
    console.log('元件 === beforeCreate')
  },

  beforeDestroy() {
    console.log('元件 === beforeDestroy')
  },
  destroyed() {
    console.log('元件 === destroyed')
  },
};
</script>
<style lang="scss" scoped></style>

到此這篇關於Vue守衛零基礎介紹的文章就介紹到這了,更多相關Vue守衛內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com