美文网首页
vue配置路由导航和拦截

vue配置路由导航和拦截

作者: 五四青年_4e7d | 来源:发表于2020-05-24 12:57 被阅读0次
export default new Router({
  routes: [
    {  //路由的重定向:
      path: '/',
      redirect:'/explorer'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      redirect:'/explorer',
      children:[    //今后所有的功能都放在home的子路由展示:
       { path:'/explorer',component:Explorer},
       { path:'/Published',component:Published},
       { path:'/Released',component:Released},
       { path:'/Draft',component:Draft},
       { path:'/Ranking',component:Ranking},
       { path:'/Clue',component:Clue},
       { path:'/Examine',component:Examine},
       { path:'/Content',component:Content, redirect:'/content/list',children:[
       {path:'/content/list',component:list},
       {path:'/content/add',component:add},
       ]},
       { path:'/Centre',component:Centre},
       { path:'/Media',component:Media,props:true},
       { path:'/ceshi',component:ceshi,props:true},
       { path:'/models',component:models,props:true},
       

      ]
    }
  ]
})

路由导航卫士:

//main.js
//添加路由导航守卫:只有登陆才允许访问
router.beforeEach((to, from, next) =>{
   //如果是登陆路径,直接放行
   if(to.path == '/login') return next()
   //获取token 如果正确进行登陆,不正确让进入登陆页面:
   const token = sessionStorage.getItem('token')
   if(!token)  return next('/login')
   //直接放行
   next()
})

相关文章

网友评论

      本文标题:vue配置路由导航和拦截

      本文链接:https://www.haomeiwen.com/subject/oindahtx.html