多参数路由

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

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>