路由传参问题

Question

路由跳转到单个文章详情页时,使用params传参会报错:Type ‘null’ is not assignable to type ‘string | number | (string | number)[]’.
但是使用下面的/posts/${id} 不报错,为什么呢?

Answer 1

张轩 2021-07-09 11:20:48

同学你好 如果你去看 id 的类型，会发现他有可能是 undenfied，也就是说你的这个参数是有可能没有的（这也非常合乎逻辑），所以这里可以使用if 先判断 id 存在，或者像你那样人为的使用类型断言，都可以解决，下面的方法，加入你使用直接一个 URL 字符串的方法，他并没有这个限制，只要是字符串就可以了

• 提问者 weixin_慕莱坞6472890 #1

  老师,放上去会提示id类型是 'string | (string | null)[] | null'    就有可能是null 或者null的数组,,这种的判断怎么写?

Answer 2

farmer_code 2021-07-08 19:36:16

params 改 query 试试，没有对应的路由参数，应是查询参数

• 提问者 weixin_慕莱坞6472890 #1

  页面不报错了,但是路由跳转报错
  Uncaught Error: Missing required param "id"
      at Object.stringify (vue-router.esm-bundler.js?6c02:1005)
      at Object.resolve (vue-router.esm-bundler.js?6c02:1421)
      at resolve (vue-router.esm-bundler.js?6c02:2861)
      at pushWithRedirect (vue-router.esm-bundler.js?6c02:2949)
      at Object.push (vue-router.esm-bundler.js?6c02:2915)
      at eval (CreatePost.vue?1489:100)
  跳转到单个页面详情路由是:
  {
        path: '/posts/:id',
        name: 'posts',
        component: UserProfile,
      }

• 提问者 weixin_慕莱坞6472890 #2

  const id = route.query.id as string
                 router.push({
                   name:'posts',
                   params:{id:id}
                 })
  使用类型断言,可以了,通过路由获取的参数类型可能有问题