Rumah hujung hadapan web tutorial js 怎样实现组件相互跳转

怎样实现组件相互跳转

Apr 14, 2018 pm 05:16 PM
capai komponen

这次给大家带来怎样实现组件相互跳转,实现组件相互跳转的注意事项有哪些,下面就是实战案例,一起来看一下。

通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下

提供了3种方式实现跳转:

①直接修改地址栏中的路由地址

<!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></router-view>
  </p>
  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
        </p>
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1>这是我的注册页面</h1>
        </p>
    })
    //配置路由词典
    //对象数组
    const  myRoutes =[
    //当路由地址:地址栏中的那个路径是myLogin访问组件
    //组件是作为标签来用的所以不能直接在component后面使用
    //要用返回值
      //path:''指定地址栏为空:默认为Login页面
      {path:'',component:testLogin},
      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]
    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者:
      /*
        router:new VueRouter({
            routes:[
              {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>
Salin selepas log masuk

②通过router-link实现跳转

<router-link to="/myRegister">注册</router-link>
Salin selepas log masuk


 
 
 
  

  
 
 
 

    

{{msg}}

       

  <script>     var testLogin = Vue.component("login",{       template:`         <p>           <h1>这是我的登录页面</h1>           &lt;router-link to=&quot;/myRegister&quot;&gt;注册&lt;/router-link&gt;         </p>       `       /*to后面是路由地址*/     })     var testRegister = Vue.component("register",{       template:`         <p>           <h1>这是我的注册页面</h1>         </p>     })     //配置路由词典     const  myRoutes =[       {path:'',component:testLogin},       {path:'/myLogin',component:testLogin},       {path:'/myRegister',component:testRegister}     ]     const myRouter = new VueRouter({       routes:myRoutes     })     new Vue({       router:myRouter,       el:"#container",       data:{         msg:"Hello VueJs"       }     })   </script>  
Salin selepas log masuk

③通过js的编程的方式

jumpToLogin: function () {
this.$router.push('/myLogin');
}
Salin selepas log masuk

代码



 
 
 
  

  
 
 
 

    

{{msg}}

       

  <script>     var testLogin = Vue.component("login",{       template:`         <p>           <h1>这是我的登录页面</h1>           &lt;router-link to=&quot;/myRegister&quot;&gt;注册&lt;/router-link&gt;         </p>       `       /*to后面是路由地址*/     })     var testRegister = Vue.component("register",{       methods:{         jumpToLogin:function(){           this.$router.push('/myLogin');         }       },       template:`         <p>           <h1>这是我的注册页面</h1>           <button @click="jumpToLogin">注册完成,去登录</button>         </p>       `     })     //配置路由词典     const  myRoutes =[       {path:'',component:testLogin},       {path:'/myLogin',component:testLogin},       {path:'/myRegister',component:testRegister}     ]     const myRouter = new VueRouter({       routes:myRoutes     })     new Vue({       router:myRouter,       el:"#container",       data:{         msg:"Hello VueJs"       }     })   </script>  
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



Atas ialah kandungan terperinci 怎样实现组件相互跳转. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara memasang komponen versi lama Windows 10 DirectPlay Cara memasang komponen versi lama Windows 10 DirectPlay Dec 28, 2023 pm 03:43 PM

Ramai pengguna sentiasa menghadapi beberapa masalah apabila bermain beberapa permainan di win10, seperti skrin membeku dan skrin kabur Pada masa ini, kami boleh menyelesaikan masalah dengan menghidupkan fungsi directplay, dan kaedah operasi fungsi itu juga Sangat mudah. Cara memasang directplay, komponen lama win10 1. Masukkan "Panel Kawalan" dalam kotak carian dan bukanya 2. Pilih ikon besar sebagai kaedah tontonan 3. Cari "Program dan Ciri" 4. Klik di sebelah kiri untuk membolehkan atau matikan fungsi menang 5. Pilih versi lama di sini Hanya tandakan kotak

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Mar 24, 2024 am 11:27 AM

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak

Gunakan Java untuk menulis kod untuk melaksanakan animasi cinta Gunakan Java untuk menulis kod untuk melaksanakan animasi cinta Dec 23, 2023 pm 12:09 PM

Menyedari kesan animasi cinta melalui kod Java Dalam bidang pengaturcaraan, kesan animasi adalah sangat biasa dan popular. Pelbagai kesan animasi boleh dicapai melalui kod Java, salah satunya ialah kesan animasi jantung. Artikel ini akan memperkenalkan cara menggunakan kod Java untuk mencapai kesan ini dan memberikan contoh kod khusus. Kunci untuk merealisasikan kesan animasi jantung ialah melukis corak berbentuk hati dan mencapai kesan animasi dengan menukar kedudukan dan warna bentuk jantung. Berikut ialah kod untuk contoh mudah: importjavax.swing.

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Mar 24, 2024 pm 06:03 PM

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.

Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Mar 20, 2024 pm 04:54 PM

Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan

Komponen sudut dan sifat paparannya: memahami lalai bukan blok Komponen sudut dan sifat paparannya: memahami lalai bukan blok Mar 15, 2024 pm 04:51 PM

Tingkah laku paparan lalai untuk komponen dalam rangka kerja Angular bukan untuk elemen peringkat blok. Pilihan reka bentuk ini menggalakkan pengkapsulan gaya komponen dan menggalakkan pembangun untuk secara sedar menentukan cara setiap komponen dipaparkan. Dengan menetapkan paparan sifat CSS secara eksplisit, paparan komponen Sudut boleh dikawal sepenuhnya untuk mencapai reka letak dan responsif yang diingini.

Bagaimana untuk membuka tetapan versi lama komponen win10 Bagaimana untuk membuka tetapan versi lama komponen win10 Dec 22, 2023 am 08:45 AM

Komponen versi lama Win10 perlu dihidupkan oleh pengguna sendiri dalam tetapan, kerana banyak komponen biasanya ditutup secara lalai Mula-mula kita perlu memasukkan tetapan yang sangat mudah komponen versi? Buka 1. Klik Start, kemudian klik "Win System" 2. Klik untuk masuk ke Control Panel 3. Kemudian klik program di bawah 4. Klik "Enable or turn off Win functions" 5. Di sini anda boleh memilih apa yang anda mahu untuk membuka

Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Mar 16, 2024 pm 12:57 PM

Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.

See all articles