溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用vue router怎么實現用戶登陸功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
路由配置
在路由頁面中添加auth字段信息用于驗證當前路由頁面是否需要登陸。
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: "/login",
name: "login",
component: () => import("./views/Login.vue")
},
{
path: "/member",
meta: {
auth: true // 用于判斷當前路由是否需要登陸
},
component: () => import('./views/Member.vue')
}
]
});全局前置操作
// 登陸驗證
const Token = "XH-TOKEN";
router.beforeEach((to, from, next) => {
let validator = typeof to.meta.auth == "undefined" || !to.meta.auth || sessionStorage.getItem(Token);
let result = validator ? {} : {
name: "login", // 跳轉到命名路由
query: {
url: to.fullPath // 做一個來源頁面，用于登陸成功之后跳轉
}
};
next(result);
});Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
關于使用vue router怎么實現用戶登陸功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
