vue-router コンポーネント間でパラメータを渡すためのメソッド-jsチュートリアル-php.cn

vue-router コンポーネント間でパラメータを渡すためのメソッド

php中世界最好的语言

リリース： 2018-04-14 17:12:48

オリジナル

2366 人が閲覧しました

今回は、vue-router コンポーネント間でパラメーターを渡す方法について説明します。vue-router コンポーネント間でパラメーターを渡すときの注意事項は何ですか? 以下は実際的なケースです。

VueRouterを使用してコンポーネント間のジャンプを実装します:パラメータ転送、具体的な内容は次のとおりです

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

①送信者と受信者をクリアします

②受信者の

ルーティングアドレスを設定します{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:''
  }
  },
   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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

mint-uiloadmore プルアップの読み込みとプルダウンの更新の間の競合を処理する方法

WeChat アプレットがサーバーに写真をアップロードする方法

以上がvue-router コンポーネント間でパラメータを渡すためのメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。