Vue-Router 구성요소 간에 매개변수를 전달하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue-Router 구성요소 간에 매개변수를 전달하는 방법

php中世界最好的语言

Apr 14, 2018 pm 05:12 PM

vue-router 옮기다

이번에는 vue-router 컴포넌트 간 파라미터 전달 방법에 대해 알려드리겠습니다. vue-router 컴포넌트 간 파라미터 전달 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

VueRouter를 사용하여 구성요소 간 점프 구현: 매개변수 전송, 구체적인 내용은 다음과 같습니다

로그인 ---사용자 이름--->main

①발신자와 수신자 삭제

②수신기의 라우팅 주소
{경로:'/myTest',comComponent:TestComponent}
-->
{path:'/myTest/:id',comComponent:TestComponent}

를 구성합니다. ③수신자는 전달된 데이터를 받습니다
this.$route.params.id

④점프할 때 매개변수를 보냅니다
this.$router.push('/myTest/20')
Jump

코드:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参</title>
 <script src="js/vue.js"></script>
 <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <!--指定容器 -->
  <router-view></router-view>
 </p>
 <script>
 //创建主页面组件
  var myMain = Vue.component("main-component",{
   //保存登录传递过来的数据
   data:function(){
  return {
   uName:''
  }
  },
   template:`
    <p>
     <h1>主页面用户名:{{uName}}</h1>
    </p>
   `,
   //挂载该组件时自动拿到数据
   beforeMount:function(){
    //接收参数
    console.log(this.$route.params);
    this.uName = this.$route.params.myName ;
   }
  })
  //创建登录页面组件
  var myLogin = Vue.component("login-component",{
   //保存用户输入的数据
   data:function(){
    return {
     userInput:""
    }
   },
   methods:{
    toMain:function(){
     //跳转到主页面，并将用户输入的名字发送过去
     this.$router.push("/main/"+this.userInput);
     console.log(this.userInput);
    }
   },
   template:`
    <p>
     <h1>登录页面</h1>
     <input type="text" v-model="userInput" placeholder="请输入用户名">
     <button @click="toMain">登录到主页面</button>
     <br>
     <router-link :to="&#39;/main/&#39;+userInput">登录到主页面</router-link>
    </p>
   `
  })
  var NotFound = Vue.component("not-found",{
   template:`
    <p>
     <h1>404 Page Not Found</h1>
     <router-link to="/login">返回登录页</router-link>
    </p>
   `
  })
  //配置路由词典
  const myRoutes = [
   {path:"",component:myLogin},
   {path:"/login",component:myLogin},
    //注意冒号,不用/否则会当成地址
   {path:"/main/:myName",component:myMain},
   //没有匹配到任何页面则跳转到notfound页面
   {path:"*",component:NotFound}
  ]
  const myRouter = new VueRouter({
   routes:myRoutes
  })
  new Vue({
   router:myRouter,
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
// 注意,路由地址
 </script>
 </body>
</html></p>
<pre class="brush:php;toolbar:false"><!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参练习</title>
 <script src="js/vue.js"></script>
 <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
<!-- -->
  <router-view></router-view>
 </p>
 <script>
//创建产品列表组件
  var myList = Vue.component("product-list",{
   //保存产品列表的数据
   data:function(){
    return{
     productList:["苹果","华为","三星","小米","vivo"]
    }
   },
   template:`
    <p>
     <h4>这是列表页</h4>
     <ul>
      <li v-for="(tmp,index) in productList">
      //将index传递过去
       <router-link v-bind:to="&#39;/detail/&#39;+index">{{tmp}}</router-link>
      </li>
     </ul>
    </p>
   `
  })
//详情页组件 
  var myDetail = Vue.component("product-detail",{
   //保存传递过来的index
   data:function(){
    return{
     myIndex:""
    }
   },
   //在挂载完成后,将接收到的index赋值给myIndex
   mounted:function(){
     this.myIndex = this.$route.params.id;
   },
   template:`
    <p>
     <h4>这是详情页</h4>
     <p>这是id为：{{myIndex}}的产品</p>
    </p>
   `
  })
//页面找不到的时候
  var NotFound = Vue.component("not-found",{
   template:`
    <p>
     <h1>404 Page Not Found</h1>
    </p>
   `
  })
// 配置路由词典
  const myRoutes = [
   {path:"",component:myList},
   {path:"/list",component:myList},
   {path:"/detail/:id",component:myDetail},
   {path:"*",component:NotFound},
  ]
  const myRouter = new VueRouter({
   routes:myRoutes
  })
  new Vue({
   router:myRouter,
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7321

자바 튜토리얼

1625

Cakephp 튜토리얼

1349

라라벨 튜토리얼

1261

PHP 튜토리얼

1209

Related knowledge

Windows 11의 배달 최적화 파일은 무엇이며 삭제할 수 있나요? Sep 29, 2023 pm 04:09 PM

배달 최적화는 Windows 업데이트 및 Windows 스토어가 업데이트를 더 빠르게 실행하고 제공하는 데 도움이 되는 기능입니다. 배달 최적화의 캐시 파일은 일정 시간이 지나면 삭제되기로 되어 있지만 일부 독자에게는 계속 쌓여서 불필요한 공간을 차지합니다. 배달 최적화 파일을 삭제해도 안전합니까? 예, 배달 최적화 파일을 삭제하는 것은 안전합니다. 이 문서에서는 Windows 11에서 삭제하는 것이 얼마나 쉬운지 알아볼 것입니다. 배달 최적화 파일을 수동으로 삭제하는 것은 권장되지 않지만 자동으로 삭제하는 것은 가능합니다. Windows 11에서 배달 최적화 파일을 삭제하는 방법은 무엇입니까? 검색 표시줄을 클릭하고 디스크 정리를 입력한 후 결과에서 도구를 엽니다. 드라이브가 여러 개인 경우 시스템에서 드라이브를 선택합니다(일반적으로 C:

내 Vue 애플리케이션에서 'NavigationDuplicated: 현재 위치에 대한 중복 탐색 방지'라는 vue-router 오류가 발생했습니다. 이를 해결하는 방법은 무엇입니까? Jun 24, 2023 pm 02:20 PM

Vue 애플리케이션에서 발생하는 vue-router 오류 "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" - 어떻게 해결합니까? Vue.js는 빠르고 유연한 JavaScript 프레임워크로서 프런트 엔드 애플리케이션 개발에서 점점 더 인기를 얻고 있습니다. VueRouter는 라우팅 관리에 사용되는 Vue.js의 코드 라이브러리입니다. 그러나 때로는

Vue 라우팅을 자세히 설명하는 기사: vue-router Sep 01, 2022 pm 07:43 PM

이 글은 Vue 제품군 버킷에 있는 Vue-Router에 대해 자세히 설명하고 라우팅 지식에 대해 알아보는 데 도움이 되기를 바랍니다.

Vue-Router: 라우팅 메타 정보를 사용하여 경로를 관리하는 방법은 무엇입니까? Dec 18, 2023 pm 01:21 PM

Vue-Router: 라우팅 메타 정보를 사용하여 경로를 관리하는 방법은 무엇입니까? 소개: Vue-Router는 Vue.js의 공식 라우팅 관리자로 단일 페이지 애플리케이션(SPA)을 빠르게 구축하는 데 도움이 됩니다. 일반적인 라우팅 기능 외에도 Vue-Router는 라우팅을 관리하고 제어하기 위해 라우팅 메타 정보 사용을 지원합니다. 라우팅 메타 정보는 경로에 연결할 수 있는 사용자 정의 속성으로, 일부 특수 논리 또는 권한 제어를 구현하는 데 도움이 될 수 있습니다. 1. 라우팅 메타정보란? 라우팅 메타 정보는 다음과 같습니다.

Vue 애플리케이션에서 vue-router를 사용할 때 '오류: 현재 위치로의 중복 탐색 방지' 문제를 해결하는 방법은 무엇입니까? Jun 24, 2023 pm 05:39 PM

Vue 애플리케이션에서 vue-router를 사용할 때 "오류: 현재 위치에 대한 중복 탐색 방지"라는 오류 메시지가 나타나는 경우가 있습니다. 이 오류 메시지는 "현재 위치로의 중복 탐색 방지"를 의미하며 일반적으로 동일한 링크를 반복적으로 클릭하거나 동일한 라우팅 경로를 사용할 때 발생합니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 라우터를 정의할 때 정확한 수정자를 사용하세요.

Vue 애플리케이션에서 vue-router를 사용할 때 '오류: 비동기 구성 요소를 해결하지 못했습니다: xxx' 문제를 해결하는 방법은 무엇입니까? Jun 24, 2023 pm 06:28 PM

vue-router를 사용하는 것은 Vue 애플리케이션에서 라우팅 제어를 구현하는 일반적인 방법입니다. 하지만 vue-router 사용 시 비동기 컴포넌트 로딩 오류로 인해 "Error: FailedtoresolveasynccomComponent:xxx" 오류가 발생하는 경우가 있습니다. 이번 글에서는 이 문제를 살펴보고 해결책을 제시하겠습니다. 비동기식 구성요소 로딩의 원리를 이해합니다. Vue에서 구성요소는 동기식 또는 비동기식으로 생성될 수 있습니다.

Go에서 컨텍스트를 사용하여 요청 매개변수를 전달하는 방법 Jul 22, 2023 pm 04:43 PM

Go 언어의 컨텍스트 패키지는 프로그램에서 요청 컨텍스트 정보를 전달하는 데 사용됩니다. 이는 매개변수를 전달하고, 요청을 가로채고, 여러 고루틴에 걸쳐 함수 간 작업을 취소할 수 있습니다. Go에서 컨텍스트 패키지를 사용하려면 먼저 "컨텍스트" 패키지를 가져와야 합니다. 다음은 컨텍스트 패키지를 사용하여 요청 매개변수 전달을 구현하는 방법을 보여주는 예입니다. packagemainimport("컨텍스트&quot

Vue 애플리케이션에서 vue-router를 사용할 때 'Uncaught TypeError: 정의되지 않은 'push' 속성을 읽을 수 없습니다' 문제를 해결하는 방법은 무엇입니까? Aug 18, 2023 pm 09:24 PM

최근 Vue 애플리케이션에서 vue-router를 사용하려고 시도했지만 "UncaughtTypeError:Cannotreadproperty'push'ofundefine"이라는 문제가 발생했습니다. 이 문제의 원인은 무엇이며 해결 방법은 무엇입니까? 먼저 vue-router를 이해해 봅시다. vue-router는 Vue.js의 공식 라우팅 관리 플러그인으로, 단일 페이지 애플리케이션(SPA)을 구축하는 데 도움이 됩니다.

See all articles

Vue-Router 구성요소 간에 매개변수를 전달하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제