阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍

这篇文章主要介绍了vue路由拦截及页面跳转的设置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

路由设置：router/index.jsexport default new Router({

routes: [

{

path: '/selfcenter',

name: 'selfcenter',

meta: {

requireAuth: true // 配置此条，进入页面前判断是否需要登陆

component: selfcenter

}

]

})

main.js：/* eslint-disable no-new */

router.beforeEach((to, from, next) => {

if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆

if (sessionStorage.getItem('sid')) { // 查询本地存储信息是否已经登陆

next();

} else {

next({

path: '/login', // 未登录则跳转至login页面

query: {redirect: to.fullPath} // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面

});

}

} else {

next();

}

});

登陆成功后：sessionStorage.setItem('sid', res.data.data.sid); // 设置本地存储信息

this.$router.push(this.$route.query.redirect); // 跳转至前一页，this.$route.query.redirect是获取上面传递过来的值

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍相关推荐

阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法
路由设置:router/index.js main.js: { if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆 i ...
h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
vue 移动端跳转页面_Vue 仿微信 app 页面跳转动画
独立开发者在开发移动端产品时,为了更高效,通常会使用 Web 技术来开发移动端项目,可以同时适配 Android.iOS.H5,稍加改动还可适配微信小程序. 在使用 Vue.js 开发移动端页面的时候 ...
java页面跳转t赋值_java servlet 几种页面跳转的方法及传值
java web 页面之间传值有一下这几种方式 1.form 表单传递参数 2.url地址栏传递参数 3.session 4.cookie 5.application 6.通过隐藏域传值 7.通过Ja ...
php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...
php 跳转到指定url_PHP想要实现页面跳转功能具体怎么操作？（函数标签示例）...
php中文网最新课程每日17点准时技术干货分享 PHP跳转到指定页面的问题通常都会建设网站需求上看到,比如我们需要从一个页面跳转到另一个页面来实现某个功能或者效果.其实在PHP中进行页面跳转是有多种 ...
小程序关闭所有页面跳转到指定页（小程序页面跳转）
在小程序开发过程中,有时候会遇到两个页面来回跳转多次后不能打开页面的情况,这时候我们要关闭之前的页面才能继续跳转. // 关闭所有页面跳转到某一页 wx.reLaunch({url: '/pages/ ...
阻止路由跳转得方式_vue中路由跳转的三种方式简洁易懂
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...

阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍

阻止路由跳转得方式_vue路由拦截及页面跳转设置的方法介绍相关推荐

最新文章

热门文章