Tip 4vue3 route jumps to pass parameters and receive instances

Background : There are many product categories on the goodscate page. Click on a category to jump to the product list under this category, and receive parameters on the product list page, and render the content on the product list page.

The first step: Goodscate passes two parameters id and content to goodslist, and separates the parameters with "/",

//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>

Step 2: The index.js route of goodslist needs to occupy a place.
If you want to pass a few parameters, it will occupy a few places.

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

The parameters passed by goodscate are actually assigned to index.js here, where the two values ​​can be written freely. give a name to.

Step 3: Read them in goodslist.vue.

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

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