路由传参
通过router-link的to属性中的params或query实现
params在地址栏显示的时候不会显示键值对,直接是值跟在后面
而query会有键名
//eg:
<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}">
</router-link>
//其中name就是roters中的路径别名
在routes配置时,注意params
{
path: '/list/:id', //接收params传来的id
component: Detail,
name: 'detail'
}
注:使用了name属性,路由配置那边就要用路径别名
{
path: 'list', // 容易犯错点 /yyb X
component: Yyb,
name: 'list' //命名路由
}
来一个列表页跳详情页的案例
组件处:src/pages/list/index.js
<template>
<div class="list-box">
<ul>
<li
v-for = "item in lists"
:key = "item.id"
>
<router-link :to="{
name: 'detail',
params: {
id: item.id,
},
query: {
img: item.pic,
name: item.d_title,
yuanjia: item.yuanjia,
jiage: item.jiage,
xiaoliang: item.xiaoliang
}
}">
<div class="img-box">
<img :src="item.pic" alt="">
</div>
<div class="content-box">
<h3> {{ item.d_title }} </h3>
<div class="content">
<div class="price">
<span> 天猫价 {{ item.yuanjia }} </span>
<span> 劵后价 {{ item.jiage }} </span>
</div>
<div class="num">
<span> 已售 {{ item.xiaoliang }} 件 </span>
</div>
</div>
</div>
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
lists: null
}
},
async created () {
console.log( this )
const result = await this.$http({
url: '/index.php',
params: {
r: 'class/cyajaxsub',
page: 1,
cid: this.$route.query.cid, // 路由的动态接参
px: 't',
cac_id: '',
}
})
this.lists = result.data.data.content
}
}
</script>
routes处的路由配置
{
path: '/list',//这里路由路径不要给我写成大写 \
component: List,
name: 'list'
},
{
path: '/detail/:id', //接收params传来的id
component: Detail,
name: 'detail'
},
路由接参
我们发现凡是使用了路由的组件,我们统称为: 路由组件
路由组件身上会自动添加一个 $route的数据
params: this.$route.params.id
query: this.$route.query.xxx
接着上面的案例,这里是详情页
<template>
<div class="detail-box">
<img :src="src" alt="">
<h3> {{ name }} </h3>
<p> 天猫价 {{ yuanjia }} </p>
<p> 券后价 {{ jiage }} </p>
<p> 已售{{ xiaoliang }} 件 </p>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
<br>
<el-button type="warning" @click.native = "addCar"> 加入购物车 </el-button>
</div>
</template>
<script>
export default {
data () {
return {
num: 1
}
},
computed: {
src () {
return this.$route.query.img
},
name () {
return this.$route.query.name
},
yuanjia () {
return this.$route.query.yuanjia
},
jiage () {
return this.$route.query.jiage
},
xiaoliang () {
return this.$route.query.xiaoliang
}
},
methods: {
handleChange ( val ) {
},
getCar () {
return localStorage.getItem('shopcar') && JSON.parse( localStorage.getItem('shopcar') ) || []
},
save ( arr ) {
localStorage.setItem('shopcar',JSON.stringify( arr ))
},
addCar () {
const shopcar = this.getCar()
const { name,yuanjia,jiage,xiaoliang,img } = this.$route.query
const { id } = this.$route.params
if ( shopcar.length == 0 ) {
//没有购物车
shopcar.push({
id, name,yuanjia,jiage,xiaoliang,img,
num: this.num,
f: false // 用于全选,反选
})
// 存入本地存储
this.save( shopcar )
} else {
// 有购物车
const f = shopcar.some( item => item.id == id )
if ( f ) {
// true 购物车已经有这个商品了
shopcar.map( item => {
if ( item.id == id ) {
item.num += this.num
return ;
}
})
// 同步本地存储
this.save( shopcar )
} else {
// false 购物车是没有这个 商品的
shopcar.push({
id, name,yuanjia,jiage,xiaoliang,img,
num: this.num,
f: false // 用于全选,反选
})
this.save( shopcar )
}
}
}
}
}
</script>