路由传参
通过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