首页 / 大前端 / vue中如何做路由参数校验

vue中如何做路由参数校验

2021-01-17 01:17 大前端 阅读 2814 来源

最近发现,有些小伙伴在nuxtjs跳转新的页面的时候喜欢用created钩子获取传过来的参数进行校验,而这么做有一些问题,如果nuxtjs跳转的时候,只是改变了参数而路由本身没有改变的话是不能触发created钩子的,那我们就没有办法进行参数校验了吗?

非也非也,nuxtjs带有validate这么一个钩子,是专门用来做参数校验的,可以在这个函数里完成参数的校验!

 

在这里我举一个例子,现在有这么一个路由http://localhost:3000/test?city=北京&page=1

在这里例子中跳转到test页面需要两个参数,city传城市,page传页码,如果我们使用created做参数校验的时候,我们点击分页按钮切换page参数的时候,created是不触发的,我们就需要用到validate

 

validate ({ query }) {
    if (typeof query.city === 'undefined' || typeof query.page === 'undefined') {
      return false
    } else {
      return true
    }
  },

 

我在做的验证是city和page的参数都不能未定义,如果两个参数存在未定义则返回false验证不通过,否则的话返回true验证通过。如果返回false,vue会自己跳转到404页面

在这里提醒一点,验证过后一定要返回true或false

vue   nuxtjs   validate  

猜你喜欢