多参数路由

时间：2019-08-12 15:58:13 阅读：93 评论：0 收藏：0 [点我收藏+]

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

ps：环境自己配置好，代码复制过来就可以直接用

　　来源：小马视频

路由属性props

###User.vue

// 多参数路由

<div>

<p>uid={{ uid }},{{nation}}</p>

<p>$route.params.uid={{$route.params.uid}}</p>

<p>$route.params.uid={{$route.params.nation}}</p>

</div>

</template>

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

踩

(0)

评论一句话评论（0）

分享档案

更多>