Vue路由传参与props解耦详解

liyfn

已于 2022-07-29 18:28:36 修改

阅读量2k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： JS进阶之路文章标签： vue.js javascript 前端

于 2022-07-28 18:12:20 首次发布

本文链接：https://blog.csdn.net/qq_42825643/article/details/126037089

文章目录

一、路由传参
二、props解耦

关于路由传参的几种方式，众说纷纭。今天来总结下路由传参的几种方式与路由解耦：

一、路由传参

路由传参总的来说有两种方式，query和params，配合声明式导航与编程式导航，各有不同的几种写法；

1.query传参

1.1 query配合声明式导航：

//路由配置
 {
   
   
    path: '/a01',
    name: 'a01',
    component: a01
  }

//传参方式1--通过url拼接，使用?分割
 <router-link to="/a01?data=a01">a01</router-link>
 //传参方式2--传入对象
<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>

1.2 query配合编程式导航：

路由配置方式不变；

//绑定事件
<span @click="btn('/a01', 'a01')">b01</span>

//处理路由方式1，通过path配合query
 btn(path, data) {
   
   
      this.$router.push({
   
   
        path,
        query: {
   
   
          data,
        },
      });
    },
    
 //处理路由方式2，通过name配合query
    btn1(name, data) {