在实际开发中难免会遇到传参问题,那么该如何传递多个参数属性呢,一起来看看吧
ps:环境自己配置好,代码复制过来就可以直接用
来源:小马视频
路由属性props
###User.vue
// 多参数路由
<template>
<div>
<h1>User</h1>
<p>uid={{ uid }},{{nation}}</p>
<p>$route.params.uid={{$route.params.uid}}</p>
<p>$route.params.uid={{$route.params.nation}}</p>
</div>
</template>
<script>
export default {
name: "User",
props:['uid','nation'],
//传递两个数据参数
data() {
return {};
}
};
</script>
###router/index.js
~js
import User from '@/components/User'
...
{
path:'/user/:uid/:nation',
name:'User',
component:User,
props:true//给一个布尔值
},
###App.vue
<!-- 多路由传参 -->
<p>
<router-link to="/">HOME</router-link>
<router-link to="/user/1/usa">User1</router-link>
<router-link to="/user/2/china">User2</router-link>
<router-link to="/user/3/korea">User3</router-link>
</p>