Question

路由参数更改类型

url

转换为 String 从路由器链接传递到
到 Number 。

router.js

{
  path: '/post/:id',
  name: 'postdetails',
  component: () => import('./components/PostDetails.vue'),
  props: true,
}

当我使用“ router-link”时，它将以“数字”类型传递道具

  <router-link :to="{name:'postdetails', params:{id: post.id}}">
      <div class="title" @click="viewPost">
        <h4>{{post.user_username}} -</h4>
        <p>{{post.title}}</p>
      </div>
    </router-link>

如果我点击 router-link 中的元素，它将重定向到另一个页面，并且“ params.id”键入 Number 。

export default {
  name: "PostDetails",
  props: {
    id: Number
  },
  created() {
    console.log(this.id);
  }
};

但是当我在Url上这样输入时：

http://localhost:8080/post/1

params道具变为 String

如何阻止params prop类型不断变化？

Answer 1

如果要将路线参数保持为特定的Type天气，可以通过 url 输入或通过 router-link 发送，则可以添加条件在路由器道具上。

{
  path: '/post/:id',
  name: 'postdetails',
  component: () => import('./components/PostDetails.vue'),
  props(route) { // we keep the params.id Type from changing when entered from url
    let props = { ...route.params }
    props.id = parseInt(props.id)
    return props
  },
},

现在，即使从网址输入，道具中的ID仍将始终是数字类型。

vuejs有一个与此类似的论坛

Router-vue, props type number didn’t cast

Answer 2

关于您的问题，您可以创建一个计算属性，该属性将接收到的参数转换为所需的类型。简单的实现将其转换为字符串：

computed: {
    idStr: function() {
        return this.id + '';
    }
}

检查我留下的评论，以了解幕后发生的事情。

Vuejs如何停止从URL或router-link输入的路由参数类型更改

2 个答案: