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

vue中如何做路由参数校验

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

最近发现，有些小伙伴在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

赞同371
vue   nuxtjs   validate  

猜你喜欢