vue-router組件間參數相互傳遞的方法-js教程-PHP中文網

首頁

web前端

js教程

vue-router組件間參數相互傳遞的方法

php中世界最好的语言

Apr 14, 2018 pm 05:12 PM

vue-router 傳遞

這次帶給大家vue-router組件間參數互相傳遞的方法，vue-router組件參數互相傳遞的注意事項有哪些，下面就是實戰案例，一起來看一下。

透過VueRouter來實現元件之間的跳躍：參數的傳遞，具體內容如下

①明確發送方和接收方

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

# ③接收者取得傳遞來的資料

this.$route.params.id

# ④跳轉的時候，發送參數

this.$router.push('/myTest/20')
跳轉

# 程式碼：

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

登入後複製

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

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1273

C# 教程

1252

Related knowledge

什麼是 Windows 11 中的傳遞最佳化文件，您可以刪除它們嗎？ Sep 29, 2023 pm 04:09 PM

傳遞最佳化是幫助Windows更新和Windows應用程式商店更快運作和交付更新的功能。傳遞優化中的快取檔案應該在一段時間後刪除，但對於我們的一些讀者來說，它們不斷堆積並佔用不必要的空間。刪除傳遞優化檔案是否安全？是的，刪除傳遞最佳化檔案是安全的，在本文中，您會發現在Windows11中這樣做非常容易。儘管不建議手動刪除傳遞優化文件，但可以自動執行此操作。如何刪除Windows11上的傳遞最佳化檔案？按一下搜尋欄，鍵入磁碟清理，然後從結果中開啟該工具。如果您有多個驅動器，請選擇具有系統的驅動器（通常是C：

Vue應用程式中遇到vue-router的錯誤「NavigationDuplicated: Avoided redundant navigation to current location」 – 怎麼解決？ 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和Vue-Router: 如何在元件之間共用資料？ Dec 17, 2023 am 09:17 AM

Vue和Vue-Router:如何在元件之間共用資料？簡介：Vue是一個流行的JavaScript框架，用於建立使用者介面。 Vue-Router是Vue的官方路由管理器，用於實現單一頁面應用程式。在Vue應用中，元件是建構使用者介面的基本單位。在許多情況下，我們需要在不同的元件之間共享資料。本文將介紹一些方法，幫助你在Vue和Vue-Router中實現資料共享，以及

在Vue應用程式中使用vue-router時出現「Error: Avoided redundant navigation to current location」怎麼解決？ Jun 24, 2023 pm 05:39 PM

在Vue應用程式中使用vue-router時，有時會出現「Error:Avoidedredundantnavigationtocurrentlocation」的錯誤訊息。這個錯誤訊息的意思是“避免了到當前位置的冗餘導航”，通常是因為重複點擊了同一個連結或使用了相同的路由路徑導致的。那麼，要怎麼解決這個問題呢？使用exact修飾符在定義router

在Vue應用程式中使用vue-router時出現「Error: Invalid route component: xxx」怎麼解決？ Jun 25, 2023 am 11:52 AM

Vue是一個流行的前端框架，它允許開發者快速建立高效、可重複使用的web應用程式。 Vue-router是Vue框架中的插件，可幫助開發者輕鬆管理應用程式的路由和導航。但是，在使用Vue-router的過程中，有時候會遇到一個常見的錯誤：「Error:Invalidroutecomponent:xxx」。這篇文章將介紹這個錯誤的原因和解決方法。原因在Vu

Vue-Router: 如何使用路由元資訊來管理路由？ Dec 18, 2023 pm 01:21 PM

Vue-Router:如何使用路由元資訊來管理路由？簡介：Vue-Router是Vue.js官方的路由管理器，它可以幫助我們快速建立單頁應用程式（SPA）。除了常見的路由功能外，Vue-Router還支援使用路由元資訊來管理和控制路由。路由元資訊是可以附加到路由上的自訂屬性，它可以幫助我們實作一些特殊的邏輯或權限控制。一、什麼是路由元資訊？路由元資訊是

Go中如何使用context實作請求參數傳遞 Jul 22, 2023 pm 04:43 PM

Go語言中的context套件是用來在程式中傳遞請求的上下文訊息的，它可以在跨多個Goroutine的函數之間傳遞參數、截取請求和取消操作。在Go中使用context包，我們首先需要導入"context"包。下面是一個範例，示範如何使用context包實作請求參數傳遞。 packagemainimport("context&quot

See all articles

vue-router組件間參數相互傳遞的方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題