背景: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)
},