关于vuecli的router全局钩子问题

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      component: index1,
      children: [
        { path: '/', name: 'index_select1', component: index_select1 },
        { path: 'index_select2', name: 'index_select2', component: index_select2 },
        { path: 'index_select3', name: 'index_select3', component: index_select3 }
      ]
    }, {
      path: '/loan_project',
      name: 'loan_project',
      component: loan_project
    }, {
      path: '/borrow',
      name: 'borrow',
      component: borrow
    }, {
      path: '/account',
      component: account,
      meta:{ auth: true }, // 这里设置,当前路由需要校验
      children: [
        { path: '/', name: 'account', component: recharge },
        { path: '/mydata', name: 'mydata', component: mydata },
        { path: '/friend', name: 'friend', component: friend },
        { path: '/AutoInvest', name: 'AutoInvest', component: AutoInvest },
        { path: '/mygold', name: 'mygold', component: mygold },
        { path: '/MoneyRecord', name: 'MoneyRecord', component: MoneyRecord },
        { path: '/recharge', name: 'recharge', component: recharge },
        { path: '/risk', name: 'risk', component: risk },
        { path: '/mail', name: 'mail', component: mail },
        { path: '/login_password',name: 'login_password',component: login_password}
      ]
    }, {
      path: '/about',
      component: about,
      children: [
        { path: '/', name: 'about_aboutUs', component: about_aboutUs },
        { path: 'about_qualification', name: 'about_qualification', component: about_qualification },
        { path: 'about_partners', name: 'about_partners', component: about_partners },
        { path: 'about_news', name: 'about_news', component: about_news },
        { path: 'about_notice', name: 'about_notice', component: about_notice },
        { path: 'about_noticetxt', name: 'about_noticetxt', component: about_noticetxt },
        { path: 'about_newstxt', name: 'about_newstxt', component: about_newstxt }
      ]
    }, {
      path: '/contact',
      name: 'contact',
      component: contact
    }, {
      path: '/news_user',
      name: 'news_user',
      component: news_user
    }
  ]
})
router.beforeEach((to,from,next) => {
  if(to.matched.some( m => m.meta.auth)){
      // 对路由进行验证
      if(store.getters.authorizd) { // 已经登陆
          next()
      }else{
          // 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。
          next({path:'/login',query:{ referrer: to.fullPath} })  
      }
  }else{
      next()
  }
})

图片描述
router未定义。。。

阅读 2.7k
1 个回答

你确实未定义。。。 应如下

Vue.use(Router)
Vue.use(ElementUI)

var router = new Router({
  routes: [
    {
      path: '/',
      component: index1,
      children: [
        { path: '/', name: 'index_select1', component: index_select1 },
        { path: 'index_select2', name: 'index_select2', component: index_select2 },
        { path: 'index_select3', name: 'index_select3', component: index_select3 }
      ]
    }, {
      path: '/loan_project',
      name: 'loan_project',
      component: loan_project
    }, {
      path: '/borrow',
      name: 'borrow',
      component: borrow
    }, {
      path: '/account',
      component: account,
      meta:{ auth: true }, // 这里设置,当前路由需要校验
      children: [
        { path: '/', name: 'account', component: recharge },
        { path: '/mydata', name: 'mydata', component: mydata },
        { path: '/friend', name: 'friend', component: friend },
        { path: '/AutoInvest', name: 'AutoInvest', component: AutoInvest },
        { path: '/mygold', name: 'mygold', component: mygold },
        { path: '/MoneyRecord', name: 'MoneyRecord', component: MoneyRecord },
        { path: '/recharge', name: 'recharge', component: recharge },
        { path: '/risk', name: 'risk', component: risk },
        { path: '/mail', name: 'mail', component: mail },
        { path: '/login_password',name: 'login_password',component: login_password}
      ]
    }, {
      path: '/about',
      component: about,
      children: [
        { path: '/', name: 'about_aboutUs', component: about_aboutUs },
        { path: 'about_qualification', name: 'about_qualification', component: about_qualification },
        { path: 'about_partners', name: 'about_partners', component: about_partners },
        { path: 'about_news', name: 'about_news', component: about_news },
        { path: 'about_notice', name: 'about_notice', component: about_notice },
        { path: 'about_noticetxt', name: 'about_noticetxt', component: about_noticetxt },
        { path: 'about_newstxt', name: 'about_newstxt', component: about_newstxt }
      ]
    }, {
      path: '/contact',
      name: 'contact',
      component: contact
    }, {
      path: '/news_user',
      name: 'news_user',
      component: news_user
    }
  ]
})
router.beforeEach((to,from,next) => {
  if(to.matched.some( m => m.meta.auth)){
      // 对路由进行验证
      if(store.getters.authorizd) { // 已经登陆
          next()
      }else{
          // 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。
          next({path:'/login',query:{ referrer: to.fullPath} })  
      }
  }else{
      next()
  }
})

export default router
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题