vue-router實現(xiàn)組件間的跳轉（參數(shù)傳遞）

更新時間：2017年11月07日 10:56:33 作者：匿名的girl

這篇文章主要為大家詳細介紹了vue-router實現(xiàn)組件間的跳轉，參數(shù)傳遞方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

通過VueRouter來實現(xiàn)組件之間的跳轉：參數(shù)的傳遞，具體內容如下

login ---用戶名--->main

①明確發(fā)送方和接收方

②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}

③接收方獲取傳遞來的數(shù)據(jù)
this.$route.params.id

④跳轉的時候，發(fā)送參數(shù)
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳轉</router-link>

代碼：

<!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>
 <div id="container">
  <p>{{msg}}</p>
  <!--指定容器 -->
  <router-view></router-view>
 </div>
 <script>
 //創(chuàng)建主頁面組件
  var myMain = Vue.component("main-component",{
   //保存登錄傳遞過來的數(shù)據(jù)
   data:function(){
  return {
   uName:''
  }
  },
   template:`
    <div>
     <h1>主頁面用戶名:{{uName}}</h1>
    </div>
   `,
   //掛載該組件時自動拿到數(shù)據(jù)
   beforeMount:function(){
    //接收參數(shù)
    console.log(this.$route.params);
    this.uName = this.$route.params.myName ;
   }
  })
  //創(chuàng)建登錄頁面組件
  var myLogin = Vue.component("login-component",{
   //保存用戶輸入的數(shù)據(jù)
   data:function(){
    return {
     userInput:""
    }
   },
   methods:{
    toMain:function(){
     //跳轉到主頁面，并將用戶輸入的名字發(fā)送過去
     this.$router.push("/main/"+this.userInput);
     console.log(this.userInput);
    }
   },
   template:`
    <div>
     <h1>登錄頁面</h1>
     <input type="text" v-model="userInput" placeholder="請輸入用戶名">
     <button @click="toMain">登錄到主頁面</button>
     <br>
     <router-link :to="'/main/'+userInput">登錄到主頁面</router-link>
    </div>
   `
  })
  var NotFound = Vue.component("not-found",{
   template:`
    <div>
     <h1>404 Page Not Found</h1>
     <router-link to="/login">返回登錄頁</router-link>
    </div>
   `
  })
  //配置路由詞典
  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>
 <div id="container">
  <p>{{msg}}</p>
<!-- -->
  <router-view></router-view>
 </div>
 <script>
//創(chuàng)建產(chǎn)品列表組件
  var myList = Vue.component("product-list",{
   //保存產(chǎn)品列表的數(shù)據(jù)
   data:function(){
    return{
     productList:["蘋果","華為","三星","小米","vivo"]
    }
   },
   template:`
    <div>
     <h4>這是列表頁</h4>
     <ul>
      <li v-for="(tmp,index) in productList">
      //將index傳遞過去
       <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
      </li>
     </ul>
    </div>
   `
  })
//詳情頁組件 
  var myDetail = Vue.component("product-detail",{
   //保存?zhèn)鬟f過來的index
   data:function(){
    return{
     myIndex:""
    }
   },
   //在掛載完成后,將接收到的index賦值給myIndex
   mounted:function(){
     this.myIndex = this.$route.params.id;
   },
   template:`
    <div>
     <h4>這是詳情頁</h4>
     <p>這是id為：{{myIndex}}的產(chǎn)品</p>
    </div>
   `
  })
//頁面找不到的時候
  var NotFound = Vue.component("not-found",{
   template:`
    <div>
     <h1>404 Page Not Found</h1>
    </div>
   `
  })
// 配置路由詞典
  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前端組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: