Vue页面跳转传递参数及接收_JavaScript_不二青春-CSDN博客

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

原网址: 访问
创建于: 2020-03-01 00:44:05
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论