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

Question

路由参数更改类型

url

到 String ] 当从 router-link.
[= 传递时
到 Number 49=]

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 Type 不断变化？

Answer 1

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

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

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

Answer 2

如果你想维护特定类型天气的路由参数，它是从 url 输入或通过 router-link 你可以通过在 router 属性上添加条件来实现。

{
  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 将始终是数字类型，即使是从 url 输入的。

vuejs 有一个类似的论坛

Router-vue, props type number didn’t cast

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

Vuejs How to stop route params Type from changing when entered from url or router-link

javascript

vue.js

vuejs2

vue-props