Vue 跳转页面路由传值 显式 + 隐式

显式：

//***上一页的Like.vue>
<ul>
<li
v-for="(item, index) in likeList"
:key="index"
@click="goDetail(item.id)"
>
<h2>
<img v-lazy="item.imgUrl" alt="" />
</h2>
<h3>{{ item.name }}</h3>
<div>
<span>¥</span>
<b>{{ item.price }}</b>
</div>
</li>
</ul>
methods: {
goDetail(id) {
this.$router.push({
path: "/detail",
query: {
id: id,
},
});
},
},
//***这一页的Detail.vue>
<div class="goods-name">
<h1>{{ goods.name }}</h1>
<div>性价首选，茶感十足、鲜醇耐泡的大众口粮茶</div>
</div>
<div class="goods-price">
<div class="pprice">
<span>¥</span>
<b>{{ goods.price }}</b>
</div>
<div class="oprice">
<span>价格:</span>
<del>¥{{ goods.price }}</del>
</div>
</div>
<div>
<img style="width: 100%; height: 500px" :src="goods.imgUrl" alt="" />
<img style="width: 100%; height: 500px" :src="goods.imgUrl" alt="" />
</div>
import http from "@/common/api/request.js";
data() {
return {
goods: {},//发送请求接收到后，goods重新赋值为一个对象，要写在模版里
};
},
//加载页面时执行getData方法
created() {
this.getData();
},
methods: {
async getData() {
let id = this.$route.query.id; //首先拿到上一页传来的值
let res = await http.$axios({
url: "/api/goods/id",
params: { //传给后端去查询
id,
},
});
this.goods = res; //查询结果是一个对象{name: (...),price:(...)}
},
//返回上一页
goBack() {
this.$router.back();
},
},
//***简易版node操作 server > routes > index.js
//查询商品id数据的接口
router.get('/api/goods/id', function (req, res, next) {
let id = req.query.id; //req.query.id是从前端的params来的
connection.query('select * from goods_list where id = ' + id + '', function (error, results) {
if (error) throw error;
res.json({
code: 0,
data: results[0]
})
})
})

补充隐式写法：

//***Like.vue>
<ul>
<li
v-for="(item, index) in likeList"
:key="index"
@click="goDetail(item.id)"
>
<h2>
<img v-lazy="item.imgUrl" alt="" />
</h2>
<h3>{{ item.name }}</h3>
<div>
<span>¥</span>
<b>{{ item.price }}</b>
</div>
</li>
</ul>
methods: {
goDetail(id) {
this.$router.push({
name: "Detail", //隐式必须写name
params: {
id: id,
},
});
},
},
//***Detail.vue>
created() {
console.log(this.$route.params.id);
},

最后

以上就是受伤铅笔为你收集整理的Vue 跳转页面路由传值 显式 + 隐式的全部内容，希望文章能够帮你解决Vue 跳转页面路由传值 显式 + 隐式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。