您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么在vue項(xiàng)目中實(shí)現(xiàn)一個(gè)未登錄跳轉(zhuǎn)到登錄頁面功能,此處通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的朋友可以參考下:
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
環(huán)境:vue 2.9.3; webpack;vue-router
目的:實(shí)現(xiàn)未登錄跳轉(zhuǎn)
例子:直接在url地址欄輸入...../home,但是這個(gè)頁面要求需要登陸之后才能進(jìn)入,判斷的值就通過登陸之后給本地緩存存入的token判斷,如果沒有就跳轉(zhuǎn)到登錄頁面,有的話就打開。
圖示:
1、直接在url地址欄輸入http://127.0.0.1:9000/#/home,但是頁面會直接跳轉(zhuǎn)到登錄頁,而且會帶上參數(shù)。
--------------------------------------------分割線----------------------------------------------
vue-router需要安裝
首先配置路由
/src/router/index.js
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/',// 登錄 name: 'Login', component: resolve => require(['@/PACS/pages/Login'],resolve) },{ path: '/home', name: 'Home', meta: { requireAuth: true, // 判斷是否需要登錄 }, component: resolve => require(['@/PACS/pages/Home'],resolve) } ] }) ## 增加了字段 requireAuth 用來判斷該路由是否需要登錄。
然后配置main.js
// 路由判斷登錄 根據(jù)路由配置文件的參數(shù) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判斷該路由是否需要登錄權(quán)限 console.log('需要登錄'); if (localStorage.token) { // 判斷當(dāng)前的token是否存在 ; 登錄存入的token next(); } else { next({ path: '/', query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由 }) } } else { next(); } });
這里是登錄時(shí)存入的token
##這樣的話登錄時(shí)就會直接跳轉(zhuǎn)到登錄頁面。
實(shí)現(xiàn)登錄成功后再跳回開始輸入的頁面,就要用到后面?zhèn)鬟f的值了。
如果包含redirect就跳轉(zhuǎn)到剛剛輸入的頁面。
注意:如果將用戶數(shù)據(jù)保存到localstorage是不合理的,這里只是給出一種思路,如果登陸之后不清空瀏覽器數(shù)據(jù),token一直存在的,判斷就會失效。
到此這篇關(guān)于怎么在vue項(xiàng)目中實(shí)現(xiàn)一個(gè)未登錄跳轉(zhuǎn)到登錄頁面功能的文章就介紹到這了,更多相關(guān)怎么在vue項(xiàng)目中實(shí)現(xiàn)一個(gè)未登錄跳轉(zhuǎn)到登錄頁面功能的內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。