vue-router传参的几种基本方式

如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

<li v-for="(article,index) in articles" :key='index' @click="getDescribe(article.id)"></li>

数据如下

data(){
        return{
            articles:[
                {id:0,pname:"张三",sex:"男",age:18},
                {id:1,pname:"李四",sex:"女",age:16},
                {id:2,pname:"王五",sex:"男",age:19},
            ]
        }
    },

方案一：
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

	getDescribe(id){
        this.$router.push({path: `/describe`,query:{id:id}})
        // 也可以用下面这两种方法
        this.$router.push({path:{`/describe?id=${id}`}})
        this.$router.push(`/describe?id=${id}`)
    }

对应路由配置：

	{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

	this.$route.query.id

方案二：

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
   this.$router.push({
     path: `/describe/${id}`,
   })
}

对应路由配置如下,需要必须在path中添加/:id来对应 $router.push 中path携带的参数，否则页面白屏

	{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

在子组件中可以使用来获取传递的参数值

this.$route.params.id

方案三：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

getDescribe(id) {
	this.$router.push({
	 	name: 'Describe',
	  	params: {
	   	 	id: id
	 	}
	})
}

对应路由配置: 这里可以添加:/id 也可以不添加。
添加的话数据会在url后面显示，并且刷新页面参数id不会丢失。
不添加数据就不会在url上显示，刷新页面参数id会丢失

	{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

	this.$route.params.id

不添加情况

添加情况

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~
子组件获取的参数值直接可以在插值表达式{{ }}中使用