Vue-router路由判断页面未登录跳转到登录页面的实例

 更新时间:2017年10月26日 08:59:46   作者:蓓蕾心晴   我要评论
下面小编就为大家带来一篇Vue-router路由判断页面未登录跳转到登录页面的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

在这之前是给路由加一个meta属性:

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
 },
}

注意:但是事实是登录的时候大多数时候并不进行跳转,所以这里需要在login跳转的路径中再加一段:

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

以上这篇Vue-router路由判断页面未登录跳转到登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nuxt.js之自动路由原理的实现方法

    Nuxt.js之自动路由原理的实现方法

    这篇文章主要介绍了Nuxt.js之自动路由原理的实现方法,nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • webpack+vuex+axios 跨域请求数据的示例代码

    webpack+vuex+axios 跨域请求数据的示例代码

    本篇文章主要介绍了webpack+vuex+axios 跨域请求数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 解决vue打包后vendor.js文件过大问题

    解决vue打包后vendor.js文件过大问题

    这篇文章主要介绍了解决vue打包后vendor.js文件过大问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue动态配置模板 ''component is''代码

    vue动态配置模板 ''component is''代码

    这篇文章主要介绍了vue动态配置模板 'component is'代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 详解vue-cli与webpack结合如何处理静态资源

    详解vue-cli与webpack结合如何处理静态资源

    本篇文章主要介绍了详解vue-cli与webpack结合如何处理静态资源,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解Vue CLI3配置解析之css.extract

    详解Vue CLI3配置解析之css.extract

    这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • VUE简单的定时器实时刷新的实现方法

    VUE简单的定时器实时刷新的实现方法

    这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 解决vue 更改计算属性后select选中值不更改的问题

    解决vue 更改计算属性后select选中值不更改的问题

    下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论