这里给大家推荐一款免费迭代 二开便捷的商城项目：源码直通车>>> 最近接触了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;