Vue 라우팅에서 값을 전달하는 몇 가지 방법은 무엇입니까?

Vue 경로 값 전송 방법: 1. "라우터 링크" 경로 탐색을 사용하여 전송합니다. 2. "$router.push"를 호출하여 경로 매개변수 값 전송을 실현합니다. 3. 경로 속성의 이름을 통해 경로를 일치시킵니다. , 매개변수 값을 전달하는 경로 속성의 이름에 따라 전달합니다. 4. 쿼리를 통해 매개변수 값을 전달합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

매개변수 값 전달의 Vue 라우팅 방법

1. 라우터 링크 경로 탐색

상위 구성 요소: <router-link to = "/점프 경로/수신 매개 변수"> </router-link><router-link to = "/跳转路径/传入的参数"></router-link>

例如：<router-link to="/a/123">routerlink传参</router-link>

子组件: this.$route.params.num接收父组件传递过来的参数

mounted () {
  this.num = this.$route.params.num
}

路由配置:：{path: '/a/:num', name: A, component: A}

地址栏中的显示:：http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

父组件: 绑定点击事件，编写跳转代码

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

子组件: this.$route.params.id接收父组件传递过来的参数

mounted () {
  this.id = this.$route.params.id
}

路由配置:：{path: '/d/:id', name: D, component: D}

地址栏中的显示:：http://localhost:8080/#/d/123

三、通过路由属性中的name匹配路由，再根据params传递参数

父组件: 匹配路由配置好的属性名

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: &#39;B&#39;,
        params: {
          sometext: &#39;一只羊出没&#39;
        }
      })
    }

子组件:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失
http://localhost:8080/#/b

四、通过query来传递参数

父组件:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: &#39;/c&#39;,
        query: {
          sometext: &#39;这是小羊同学&#39;
        }
      })
    }

子组件:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

路由配置: 不需要做任何修改
{path: '/c', name: 'C', component: C}

地址栏中的显示: (中文做了转码)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

예: <router-link to="/a/123">routerlink 전달 매개변수</router-link>

하위 구성 요소:

this.$route.params.num은 상위 구성 요소🎜rrreee🎜🎜Route 구성:🎜:{경로: '/a/:num', 이름: A, 구성 요소: A}가 전달한 매개 변수를 받습니다. 🎜🎜🎜주소 표시줄에 표시:🎜：http://localhost:8080/#/a/123🎜🎜🎜🎜 2. $router.push를 호출하여 Route 매개변수를 구현합니다. passing🎜🎜🎜🎜🎜상위 구성 요소:🎜 클릭 이벤트 바인딩 및 점프 코드 작성🎜rrreee🎜🎜하위 구성 요소:🎜 this.$route.params.id는 상위 구성 요소가 전달한 매개 변수를 받습니다🎜rrreee🎜🎜Route 구성:🎜： {경로: '/d/:id', 이름: D, 구성 요소: D}🎜🎜🎜주소 표시줄에 표시:🎜：http://localhost:8080 /#/ d/123🎜🎜🎜🎜3. 경로 속성의 이름을 통해 경로를 일치시킨 다음 params🎜🎜🎜🎜🎜상위 구성 요소에 따라 매개변수를 전달합니다.🎜 경로에서 구성한 속성 이름을 일치시킵니다🎜 rrreee🎜🎜 하위 구성 요소:🎜🎜rrreee🎜🎜라우팅 구성:🎜 경로 뒤에 들어오는 매개변수를 추가할 필요는 없지만 이름은 상위 구성 요소의 이름과 일치해야 합니다.
{path: ' /b', 이름: 'B', 구성 요소: B}🎜🎜🎜주소 표시줄에 표시: 🎜 주소 표시줄 🎜은 들어오는 매개변수를 🎜 전달하지 않으며 🎜 매개변수는 🎜
http://localhost:8080/#/b🎜🎜🎜🎜4. 쿼리를 통해 매개변수 전달🎜🎜🎜🎜🎜상위 구성 요소:🎜🎜 rrreee🎜🎜하위 구성 요소:🎜🎜rrreee 🎜🎜라우팅 구성:🎜 수정이 필요하지 않습니다
{경로: '/c', 이름: 'C', 구성 요소: C}🎜🎜 🎜주소 표시줄에 표시:🎜(중국어 트랜스코딩)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0% 8F%E7%BE %8A%E5%90%8C%E5%AD%A6🎜🎜관련 추천: "🎜vue.js tutorial🎜"🎜

위 내용은 Vue 라우팅에서 값을 전달하는 몇 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!