Vue页面跳转传递参数及接收

138 阅读1分钟

最近接触了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 },

] })` 二、页面跳转及传参

`//方式一 跳转

//方式二 跳转 三、参数接收

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

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