欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)未登錄訪問其他頁面自動跳轉(zhuǎn)登錄頁功能(實(shí)現(xiàn)步驟)

 更新時間：2023年07月17日 11:13:27   作者：abcnull  
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

簡介

未登錄下，訪問一些頁面是不被允許或者說也沒什么作用，所以需要自動導(dǎo)向/login頁面

步驟一：依賴安裝

一般需要借助 cookie 判定，也需要使用關(guān)鍵到 vue-router

cnpm install vue-router --save
cnpm install vue-cookies --save

步驟二：補(bǔ)充 router 攔截代碼

這里有前置條件：

  • 你已經(jīng)寫好了登錄頁面組件，包括登錄后 js 中怎么存儲 cookies
  • 你已經(jīng)配置好 router/index.js 中 router，并在 main.js 中成功 use 這個 router

然后你只需要在 utils/index.js 這個 router 聲明代碼中加上

import { createRouter, createWebHistory} from "vue-router"
import VueCookies from "vue-cookies";
// 異步的，路由到某個頁面之前攔截先做些處理，這里處理未登錄下所有頁面請求都轉(zhuǎn)向請求登錄頁
router.beforeEach((to, from, next) => {
    if (!VueCookies.get("userInfo") && to.path !== "/login") {
        router.push("/login")
    }
    next()
})

額外

router.beforeEach是Vue Router提供的一個全局前置守衛(wèi)，它允許您在導(dǎo)航發(fā)生之前執(zhí)行一些邏輯。它可以用來進(jìn)行路由權(quán)限控制、路由攔截、頁面統(tǒng)計(jì)等操作

router.beforeEach接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)會在每次路由導(dǎo)航之前被執(zhí)行?；卣{(diào)函數(shù)接收三個參數(shù)：

  • to：即將要進(jìn)入的路由對象
  • from：當(dāng)前導(dǎo)航正要離開的路由對象
  • next：調(diào)用該方法后，才能進(jìn)入下一個鉤子。其中next有三種調(diào)用方式：next()、next(false)、next(path)

到此這篇關(guān)于vue實(shí)現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁的文章就介紹到這了,更多相關(guān)vue未登錄跳轉(zhuǎn)登錄頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 關(guān)于Vue的異步組件

    關(guān)于Vue的異步組件

    在大型項(xiàng)目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時再從服務(wù)器加載相關(guān)組件。Vue 提供了defineAsyncComponent 方法來實(shí)現(xiàn)此功能,需要的朋友可以參考下
    2023-04-04
  • ant design vue導(dǎo)航菜單與路由配置操作

    ant design vue導(dǎo)航菜單與路由配置操作

    這篇文章主要介紹了ant design vue導(dǎo)航菜單與路由配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue2.0 事件的廣播與接收(觀察者模式)

    Vue2.0 事件的廣播與接收(觀察者模式)

    這篇文章主要介紹了Vue2.0 事件的廣播與接收(觀察者模式)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • vue實(shí)現(xiàn)文件上傳讀取及下載功能

    vue實(shí)現(xiàn)文件上傳讀取及下載功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳讀取及下載功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue3父組件和子組件如何傳值實(shí)例詳解

    vue3父組件和子組件如何傳值實(shí)例詳解

    近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • Vue中插槽slot的用法詳解

    Vue中插槽slot的用法詳解

    插槽（Slot）是Vue.js中一個非常重要的概念,它極大地提高了組件的復(fù)用性和靈活性,通過插槽,我們可以自定義組件的內(nèi)容,使其能夠適應(yīng)不同的場景,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue中插槽的基本用法、類型以及高級技巧,需要的朋友可以參考下
    2024-11-11
  • Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)

    Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)

    在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧
    2018-08-08
  • antd form表單使用setFildesValue 賦值失效的解決

    antd form表單使用setFildesValue 賦值失效的解決

    這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案，具有很好的參考價值，希望對大家有所幫助。
    2023-04-04
  • Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件

    Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件

    這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟

    將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟

    最近接了個小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下
    2023-10-10

最新評論