技巧4vue3路由跳转传参并接收 实例

背景：goodscate页面有很多商品分类，点击某一分类能够跳转到该分类下的商品列表，并在商品列表页面接收参数，content渲染在商品列表页面。

第一步：goodscate给goodslist传两个参数id和content,用“/”分隔参数、

//goodscate
<template>
	<div>
		<h1>goodscate</h1>
		<ul>
		   <li v-for="(item,index) in catelist" :key='index'>
			<router-link  :to='"/goodslist/"+item.id+"/"+item.content'>
				<img :src="item.url" /><br>
		        <b>{
    
    {
    
    item.content}}</b>
		    </router-link>
		  </li>
		 </ul>
	</div>
</template>

第二步：goodslist的index.js路由要占位.
想传几个参数就占几个位。

 // goodscate.vue  要传几个参数，就占几个位
 {
    
    
 path: "/goodslist/:id/:content",
 ...
 }

goodscate传过去的参数实际上赋给了 index.js这里，这里的两个值可以随便写。起名字。

第三步：在goodslist.vue里把他们读取出来。

 <!-- 要通过刚才传递过来的键名来接收，index.js里goodslist的id和content -->
      <h3>{
   
   { $route.params.content}}</h3>

created(){
    
    
		  //函数调用goodscate传过来的id
	      this.datafun(this.$route.params.id)
	  },