關於vue-router實現組件間的跳轉參數傳遞-js教程-PHP中文網

首頁

web前端

js教程

關於vue-router實現組件間的跳轉參數傳遞

小云云

Dec 26, 2017 pm 01:36 PM

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:&#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工具

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程

1605

PHP教程

1510

276

Related knowledge

如何安裝Win10舊版元件DirectPlay Dec 28, 2023 pm 03:43 PM

不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題，比如說卡屏和花屏等等情況，這個時候我們是可以採用打開directplay這個功能來解決的，而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了

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 實現日曆元件？ Jun 25, 2023 pm 01:28 PM

Vue是一款非常流行的前端框架，它提供了許多工具和功能，如元件化、資料綁定、事件處理等，能夠幫助開發者建立出高效、靈活和易於維護的Web應用程式。在這篇文章中，我來介紹如何使用Vue實作一個日曆元件。 1.需求分析首先，我們需要分析這個行事曆組件的需求。一個基本的日曆應該具備以下功能：展示當前月份的日曆頁面；支援切換到前一月或下一月；支援點擊某一天，

VUE3開發基礎：使用extends繼承元件 Jun 16, 2023 am 08:58 AM

Vue是目前最受歡迎的前端框架之一，而VUE3則是Vue框架的最新版本，相較於VUE2，VUE3具備了更高的性能和更出色的開發體驗，成為了眾多開發者的首選。在VUE3中，使用extends繼承元件是一個非常實用的開發方式，本文將為大家介紹如何使用extends繼承元件。 extends是什麼？在Vue中，extends是一個非常實用的屬性，它可以用於子元件繼承父

如何開啟win10舊版組件的設置 Dec 22, 2023 am 08:45 AM

win10舊版元件是需要使用者自己去設定裡面打開的，因為很多的元件平時都是預設關閉的狀態，首先我們需要進入到設定裡面，操作很簡單，跟著下面的步驟來就可以了win10舊版元件在哪裡開啟1、點選開始，然後點選「win系統」2、點選進入控制台3、再點選下面的程式4、點選「啟用或關閉win功能」5、在這裡就可以選擇你要的開啟了

Angular元件及其顯示屬性：了解非block預設值 Mar 15, 2024 pm 04:51 PM

Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝，並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display，Angular組件的顯示可以完全控制，從而實現所需的佈局和響應能力。

Vue組件實戰：分頁組件開發 Nov 24, 2023 am 08:56 AM

Vue元件實戰：分頁元件開發介紹在網路應用程式中，分頁功能是不可或缺的一個元件。一個好的分頁元件應該展示簡潔明了，功能豐富，而且易於整合和使用。在本文中，我們將介紹如何使用Vue.js框架來開發一個高度可自訂化的分頁元件。我們將透過程式碼範例來詳細說明如何使用Vue元件開發。技術堆疊Vue.js2.xJavaScript(ES6)HTML5和CSS3開發環

在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

See all articles

關於vue-router實現組件間的跳轉參數傳遞

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題