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

Question

路线参数更改类型

• 从URL输入时，将其转换为String

• 从router-link传递到Number时。

router.js

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

当我使用“ router-link”时，它将作为“ number”类型传递道具

  <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

如果要将路线参数保持为某个特定类型的天气，可以从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，道具类型编号未投放

Answer 2

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

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

查看我留下的评论，以了解幕后情况。