Vue页面跳转传递参数及接收
发布于 1 个月前 作者 Lofate 517 次浏览 来自 分享

这里给大家推荐一款免费迭代 二开便捷的商城项目:源码直通车>>> 最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。

典型应用场景:列表页跳转到详情页

一、配置路由

文件路径:src/router/config.php

import Vue from 'vue’ import Router from ‘vue-router’

import classify from ‘…/./components/classify/classify.vue’

import classifyChild from ‘…/./components/classify/classifyChild.vue’

export default new Router({ mode: ‘history’, routes: [ { path: ‘/classify’, name: ’ classify’, component: classify }, { path: ‘/classify/classifyChild’, name: ‘classifyChild’, component: classifyChild },

] })

二、页面跳转及传参

//方式一 <router-link :to="{name:‘classifyChild’,params:{id:item.id}}"> <button>跳转</button> </router-link>

//方式二 <router-link :to="{path:’/classify/classifyChild’,query:{id:item.id}}"> <button>跳转</button> </router-link> 三、参数接收

//对应于方式一 let id=this.$route.params.id;

//对应于方式二 let id=this.$route.query.id;

回到顶部