Vue动态路由 使用params进行传参。

1、若要传参首先要创建一个小小的项目来渲染，这里就不多言了。

2、在src/components文件夹下定义父组件（首页）Home.vue进行传参:

[code]<template>
<div>
<h1>Hello NyDynamicRouter!</h1>
<p v-for="(item,index) in userInfo" :key="index" >
此处 必须是 :to
<router-link :to="{name:'test',params:{ id:userInfo[0].idd }}"><!-- 为达到直观效果index+1 -->
测试·索引{{index+1}}
</router-link>     <!-- 这里idd是data中定义的键值名，可以是任意字段 -->
</p>
</div>
</template>

<script>
export default {
name: 'Home',
data(){
return{
userInfo:[
{
idd:"test1"
},
{
idd:"test2"
},
{
idd:"test3"
},
{
idd:"test4"
}
]
}
}
}
</script>

<style scoped>

</style>

3、同样在src/components文件夹下（个人习惯）定义子组件User.vue进行接收数据：

[code]<template>
<div>
我是===》{{this.$route.params.id}}
</div>
</template>

<script>
export default {
data() {
return {
};
}
}
</script>

<style scoped>

</style>

4、定义好组件以后，还需要在index.js中进行配置：

[code]import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
name:"test",
path: '/test/:id',
component: User
}
]
})

5、然后便可以打开项目所在文件夹，使用命令提示框打开测试页面如下：

点击测试·索引1页面会跳转到User页面，显示如下：

并根据idd索引值的不同，User页面会渲染出不同idd下的值。