(原创) Vue 中 Route 传参和 props 的解析

先说正确的方法如下,

箭头函数返回对象字面量,记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://cloud.tencent.com/developer/ask/148775

    {
      path: '/heroes/:id',
      name: 'hero-detail',
      component: HeroDetail,
      props: r => ({ id: parseInt(r.params.id) }),
    },

点击路径的时候 id 是数字。

(原创) Vue 中 Route 传参和 props 的解析_第1张图片

但是当刷新后 id 会变成 String

(原创) Vue 中 Route 传参和 props 的解析_第2张图片

如果用如下不做 parse 的方式,

    {
      path: '/heroes/:id',
      name: 'hero-detail',
      component: HeroDetail,
      props: true,
    },

刷新时就会报类型错误。

(原创) Vue 中 Route 传参和 props 的解析_第3张图片

 

 

你可能感兴趣的:(Vue)