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

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

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

<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进行接收数据：

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

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

<style scoped>

</style>

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

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下的值。