扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家介绍使用vue router怎么实现用户登陆功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联公司-专业网站定制、快速模板网站建设、高性价比达坂城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式达坂城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖达坂城地区。费用合理售后完善，10多年实体公司更值得信赖。
路由配置
在路由页面中添加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怎么实现用户登陆功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网