有些路由頁面需要用戶登陸之后才能訪問如（用戶中心），如果用戶沒有登陸就訪問這些頁面的話就應該轉換到登陸頁面，登陸成功之后在進入該頁面。

需要用到的知識點有：H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta).

路由配置

在路由頁面中添加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);});

注意：登陸成功之后要用 sesionStorage.setItem設置會話值

總結

以上所述是小編給大家介紹的vue router 用戶登陸功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！