亲宝软件园·资讯

展开

Vue路由传参

liyfn 人气:0

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

一、路由传参

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

query传参

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>

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) {
      this.$router.push({
        name,
        query: {
          data,
        },
      });
    },

query传参的特点

1.参数在url中展现,使用?分割。属性和值以键值对形式存在

2.子组件通过$route.query.xxx方式获取参数(xxx为自己定义的参数名)

params传参

params传参分为两种情况,路径占位与不占位

路径使用参数占位时

params配合声明式导航:

//路由声明需要使用‘:'占位
{
    path: '/a02/:data',
    name: 'a02',
    component: a02
  }
//传参方式1--url拼接,不需要?分割
<router-link to="/a02/a02">a02</router-link>
//传参方式2--传对象
<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>

params配合编程式导航:

  btn1(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

params传参配合路径占位的特点:

1.参数在url中展现,没有?=等额外标签

2.子组件以$route.params.xxx方式获取参数(xxx为自己定义的参数名)

路径不使用占位时

声明式导航

<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>

注意!!需要使用name,不可以使用path,官网解释如下:

注意:如果提供了 path,params 会被忽略,你需要提供路由的 name 或手写完整的带有参数的 path

编程式导航

//路由配置
{
    path: '/a03',
    name: 'a03',
    component: a03
  }
  //路由跳转
 <span @click="btn3('a03', 'a03')">b04</span>
 btn3(name, data) {
      this.$router.push({
        name,
        params: {
          data,
        },
      });
    },

params传参占位的特点:

1.参数在不在url体现

2.刷新后数据丢失

二、props解耦

vue的组件是可以复用的,但是路由给子组件传值后,通过$route获取参数会导致子组件无法复用,解决这个问题,需要用到props解耦;

1.props布尔值

具体使用:

1.在路由配置时使用props

{
    path: '/a02/:data',
    name: 'a02',
    component: a02,
    //使用props传参
    props: true
  }

2.父组件传参,没有变化

3.子组件使用props接收

<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

props为布尔值 true 开启props接收,false关闭。

上例我们演示的就是这样的情况,但是,props为布尔值时,只适用于params传参,对query不适用;

2.props函数模式

props配置为函数,可以获取query方式的传值,通过route.query.xxx方式

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: (route) => ({ data: route.query.data })
  }
//传参--与query一致
<router-link to="/a01?data=a01">a01</router-link>
//接收
<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

3.props对象模式

props对象模式直接传递固定值,不需要再传参;

//配置
 {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: {data:'123'}
  }

以上,为本次分享全部内容,如有错误,欢迎随时私信指正,不胜感激。

加载全部内容

相关教程
猜你喜欢
用户评论