Vuejs 如何在从 url 或路由器-link 输入时停止更改路由参数类型
Vuejs How to stop route params Type from changing when entered from url or router-link
路由参数更改类型
当我从 url[=49= 输入时 到 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 不断变化?
关于您的问题,您可以创建一个计算 属性,它将接收到的参数转换为您希望的类型。将其转换为字符串的简单实现:
computed: {
idStr: function() {
return this.id + '';
}
}
查看我留下的评论以了解幕后发生的事情。
如果你想维护特定类型天气的路由参数,它是从 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 有一个类似的论坛
路由参数更改类型
-
当我从 url[=49= 输入时
到 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 不断变化?
关于您的问题,您可以创建一个计算 属性,它将接收到的参数转换为您希望的类型。将其转换为字符串的简单实现:
computed: {
idStr: function() {
return this.id + '';
}
}
查看我留下的评论以了解幕后发生的事情。
如果你想维护特定类型天气的路由参数,它是从 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 有一个类似的论坛