多参数路由

在实际开发中难免会遇到传参问题,那么该如何传递多个参数属性呢,一起来看看吧

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>

本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

原文地址:https://www.cnblogs.com/huchong-bk/p/11340305.html