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

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

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

通過(guò)VueRouter來(lái)實(shí)現(xiàn)組件之間的跳轉(zhuǎn)：參數(shù)的傳遞，具體內(nèi)容如下

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

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

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

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

④跳轉(zhuǎn)的時(shí)候，發(fā)送參數(shù)
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳轉(zhuǎn)</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)建主頁(yè)面組件
  var myMain = Vue.component("main-component",{
   //保存登錄傳遞過(guò)來(lái)的數(shù)據(jù)
   data:function(){
  return {
   uName:''
  }
  },
   template:`
    <div>
     <h1>主頁(yè)面用戶名:{{uName}}</h1>
    </div>
   `,
   //掛載該組件時(shí)自動(dòng)拿到數(shù)據(jù)
   beforeMount:function(){
    //接收參數(shù)
    console.log(this.$route.params);
    this.uName = this.$route.params.myName ;
   }
  })
  //創(chuàng)建登錄頁(yè)面組件
  var myLogin = Vue.component("login-component",{
   //保存用戶輸入的數(shù)據(jù)
   data:function(){
    return {
     userInput:""
    }
   },
   methods:{
    toMain:function(){
     //跳轉(zhuǎn)到主頁(yè)面，并將用戶輸入的名字發(fā)送過(guò)去
     this.$router.push("/main/"+this.userInput);
     console.log(this.userInput);
    }
   },
   template:`
    <div>
     <h1>登錄頁(yè)面</h1>
     <input type="text" v-model="userInput" placeholder="請(qǐng)輸入用戶名">
     <button @click="toMain">登錄到主頁(yè)面</button>
     <br>
     <router-link :to="'/main/'+userInput">登錄到主頁(yè)面</router-link>
    </div>
   `
  })
  var NotFound = Vue.component("not-found",{
   template:`
    <div>
     <h1>404 Page Not Found</h1>
     <router-link to="/login">返回登錄頁(yè)</router-link>
    </div>
   `
  })
  //配置路由詞典
  const myRoutes = [
   {path:"",component:myLogin},
   {path:"/login",component:myLogin},
    //注意冒號(hào),不用/否則會(huì)當(dāng)成地址
   {path:"/main/:myName",component:myMain},
   //沒(méi)有匹配到任何頁(yè)面則跳轉(zhuǎn)到notfound頁(yè)面
   {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>傳參練習(xí)</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>這是列表頁(yè)</h4>
     <ul>
      <li v-for="(tmp,index) in productList">
      //將index傳遞過(guò)去
       <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
      </li>
     </ul>
    </div>
   `
  })
//詳情頁(yè)組件 
  var myDetail = Vue.component("product-detail",{
   //保存?zhèn)鬟f過(guò)來(lái)的index
   data:function(){
    return{
     myIndex:""
    }
   },
   //在掛載完成后,將接收到的index賦值給myIndex
   mounted:function(){
     this.myIndex = this.$route.params.id;
   },
   template:`
    <div>
     <h4>這是詳情頁(yè)</h4>
     <p>這是id為：{{myIndex}}的產(chǎn)品</p>
    </div>
   `
  })
//頁(yè)面找不到的時(shí)候
  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>

關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: