javascript - Vuejs如何从url或router-link输入时阻止路由参数类型改变

Question

路由参数更改类型

• 当我从url输入时到String

• 从router-link传递到Number。

路由器.js

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

当我使用“路由器链接”时，它会将道具作为“数字”类型传递

  <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 道具变成字符串

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

Answer 1

Answer 2

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

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

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