首页 > 其他 > 详细

vue-路由守卫

时间:2020-06-24 22:54:37      阅读:60      评论:0      收藏:0      [点我收藏+]
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘
Vue.use(Router)

const router = new Router({
  mode: ‘history‘,
  routes: [
    {
      path: ‘/‘,
      // name: ‘Home‘,
      // component: Home
      redirect:‘/login‘
    },{
      path:‘/login‘,
      component:Login
    },{
    }
    
      
  ]
})
router.beforeEach((to,from,next)=>{    //导航守卫
   //to将要访问的路径
   //from代表冲哪一个路径跳转过来
   //next 是一个函数 表示放行   
       //next()放行   next(‘/login‘) 强制跳转到哪个页面
     if(to.path ===‘/login‘) return next()

     // 获取token
     const tokenStr= window.sessionStorage.getItem(‘token‘)  //获取sessionStorage  
     if (!tokenStr) return next(‘/login‘)    //若没有直接强制回到首页


     next()   //若存在允许放行
     
})

export default router

 

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘
import Login from ‘@/components/Login‘
import Wecome from ‘@/components/wecome‘
import User from ‘@/components/user/user‘
Vue.use(Router)

const router = new Router({
  mode: ‘history‘,
  routes: [
    {
      path: ‘/‘,
      // name: ‘Home‘,
      // component: Home
      redirect:‘/login‘
    },{
      path:‘/login‘,
      component:Login
    },{
      path: ‘/home‘,
      name: ‘Home‘,
      component: Home,
      redirect:‘/wecome‘,
      children:[{
         path: ‘/wecome‘,
         name: ‘Wecome‘,
        component: Wecome,
      },{
        path: ‘/1-2-1‘,
        name: ‘user‘,
        component: User,
      }]
    }
    
      
  ]
})
router.beforeEach((to,from,next)=>{    //导航守卫
   //to将要访问的路径
   //from代表冲哪一个路径跳转过来
   //next 是一个函数 表示放行   
       //next()放行   next(‘/login‘) 强制跳转到哪个页面
     if(to.path ===‘/login‘return next()

     // 获取token
     const tokenStrwindow.sessionStorage.getItem(‘token‘)
     if (!tokenStrreturn next(‘/login‘)


     next()
     
})

export default router

vue-路由守卫

原文:https://www.cnblogs.com/taozhibin/p/13190170.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!