コンポーネント間のジャンプパラメータ転送を実装する vue-router について-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

コンポーネント間のジャンプパラメータ転送を実装する vue-router について

小云云

Dec 26, 2017 pm 01:36 PM

vue-router コンポーネント

この記事では主にコンポーネント間のジャンプとパラメータ転送メソッドを詳細に紹介します。興味のある方はぜひ参考にしてください。

コンポーネント間のジャンプはVueRouter:パラメータ転送によって実装され、具体的な内容は以下の通りです

ログイン---ユーザー名--->main

①送信者と受信者をクリア

②受信者を設定するルーティングアドレス
{ path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component: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:&#39;&#39;
  }
  },
   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>

ログイン後にコピー

<!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>

ログイン後にコピー

vue.js 学習チュートリアルについては、特別な vue.js コンポーネント学習チュートリアル、Vue.js フロントエンドコンポーネントをクリックしてください。チュートリアルに従って学習してください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7563

CakePHP チュートリアル

1385

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Dec 28, 2023 pm 03:43 PM

win10で一部のゲームをプレイすると、画面がフリーズしたり画面がぼやけるなどの不具合が多くのユーザーに発生しますが、現時点ではダイレクトプレイ機能をオンにすることで問題を解決でき、機能の操作方法も非常に簡単です。 win10 の古いコンポーネントである Directplay をインストールする方法 1. 検索ボックスに「コントロールパネル」と入力して開きます 2. 表示方法として大きなアイコンを選択します 3. 「プログラムと機能」を見つけます 4. 左側をクリックして有効にするか、 Win 機能をオフにする 5. ここで古いバージョンを選択しますチェックボックスをオンにするだけです

Vue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」が発生しました。これを解決するにはどうすればよいですか? Jun 24, 2023 pm 02:20 PM

Vue アプリケーションで vue-router エラー「NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation」が発生しました – 解決方法は? Vue.js は、高速で柔軟な JavaScript フレームワークとして、フロントエンドアプリケーション開発でますます人気が高まっています。 VueRouter は、ルーティング管理に使用される Vue.js のコードライブラリです。ただし、場合によっては、

Vueを使用してカレンダーコンポーネントを実装するにはどうすればよいですか? Jun 25, 2023 pm 01:28 PM

Vue は非常に人気のあるフロントエンドフレームワークであり、コンポーネント化、データバインディング、イベント処理など、開発者が効率的で柔軟で保守が容易な Web アプリケーションを構築するのに役立つ多くのツールと機能を提供します。この記事では、Vueを使ってカレンダーコンポーネントを実装する方法を紹介します。 1. 要件の分析まず、このカレンダーコンポーネントの要件を分析する必要があります。基本的なカレンダーには次の機能が必要です: 当月のカレンダーページの表示、前月または翌月への切り替えのサポート、特定の日のクリックのサポート、

VUE3 開発の基本: extend を使用してコンポーネントを継承する Jun 16, 2023 am 08:58 AM

Vue は現在最も人気のあるフロントエンドフレームワークの 1 つであり、VUE3 は Vue フレームワークの最新バージョンであり、VUE2 と比較してパフォーマンスが高く、開発エクスペリエンスが優れているため、多くの開発者の最初の選択肢となっています。 VUE3 では extends を使ってコンポーネントを継承することが非常に実用的な開発手法となっておりますので、この記事では extends を使ってコンポーネントを継承する方法を紹介します。エクステンドとは何ですか？ Vue では、extends は非常に実用的な属性であり、子コンポーネントが親から継承するために使用できます。

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネントスタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

古いバージョンのwin10コンポーネントの設定を開く方法 Dec 22, 2023 am 08:45 AM

Win10 の古いバージョンのコンポーネントは、デフォルトで閉じられていることが多いため、ユーザー自身が設定で有効にする必要があります。まず、設定を入力する必要があります。操作は非常に簡単です。以下の手順に従ってください。Win10 の古いバージョンはどこにありますか?バージョンコンポーネント? 開く 1. [スタート] をクリックし、[Win システム] をクリックします 2. クリックしてコントロールパネルに入ります 3. 次に、下のプログラムをクリックします 4. [Win 機能を有効または無効にする] をクリックします 5. ここで必要なものを選択できます開く

Vue と Vue-Router: コンポーネント間でデータを共有するにはどうすればよいですか? Dec 17, 2023 am 09:17 AM

Vue と Vue-Router: コンポーネント間でデータを共有するにはどうすればよいですか?はじめに: Vue は、ユーザーインターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue-Router は Vue の公式ルーティングマネージャーであり、シングルページアプリケーションの実装に使用されます。 Vue アプリケーションでは、コンポーネントはユーザーインターフェイスを構築するための基本単位です。多くの場合、異なるコンポーネント間でデータを共有する必要があります。この記事では、Vue と Vue-Router でデータ共有を実現するのに役立ついくつかの方法を紹介します。

Vue コンポーネントの実践: ページングコンポーネントの開発 Nov 24, 2023 am 08:56 AM

Vue コンポーネントの実践: ページングコンポーネント開発の概要 Web アプリケーションでは、ページング機能は不可欠なコンポーネントです。優れたページングコンポーネントは、プレゼンテーションがシンプルかつ明確で、機能が豊富で、統合と使用が簡単である必要があります。この記事では、Vue.js フレームワークを使用して高度にカスタマイズ可能なページングコンポーネントを開発する方法を紹介します。 Vueコンポーネントを使った開発方法をコード例を通して詳しく解説します。テクノロジースタック Vue.js2.xJavaScript (ES6) HTML5 および CSS3 開発環境

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版

ホットトピック