关于vue-router实现组件间的跳转参数传递
本文主要为大家详细介绍了vue-router实现组件间的跳转，参数传递方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址
{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="'/main/'+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="'/detail/'+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前端组件学习教程进行学习。
相关推荐：
Atas ialah kandungan terperinci 关于vue-router实现组件间的跳转参数传递. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1385
52
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
Saya mengalami ralat vue-router 'NavigationDuplicated: Mengelakkan navigasi berlebihan ke lokasi semasa' dalam aplikasi Vue saya - bagaimana untuk menyelesaikannya?
Jun 24, 2023 pm 02:20 PM
Ralat vue-router "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" yang ditemui dalam aplikasi Vue – bagaimana untuk menyelesaikannya? Vue.js menjadi semakin popular dalam pembangunan aplikasi bahagian hadapan sebagai rangka kerja JavaScript yang pantas dan fleksibel. VueRouter ialah perpustakaan kod Vue.js yang digunakan untuk pengurusan penghalaan. Namun, kadangkala
Bagaimana untuk melaksanakan komponen kalendar menggunakan Vue?
Jun 25, 2023 pm 01:28 PM
Vue ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan banyak alat dan fungsi, seperti pembahagian, pengikatan data, pemprosesan acara, dll., yang boleh membantu pembangun membina aplikasi Web yang cekap, fleksibel dan mudah diselenggara. Dalam artikel ini, saya akan memperkenalkan cara melaksanakan komponen kalendar menggunakan Vue. 1. Analisis keperluan Pertama, kita perlu menganalisis keperluan komponen kalendar ini. Kalendar asas harus mempunyai fungsi berikut: memaparkan halaman kalendar bulan semasa bertukar kepada bulan sebelumnya atau bulan hadapan dengan mengklik pada hari tertentu;
Asas pembangunan VUE3: menggunakan lanjutan untuk mewarisi komponen
Jun 16, 2023 am 08:58 AM
Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, dan VUE3 ialah versi terkini rangka kerja Vue Berbanding dengan VUE2, VUE3 mempunyai prestasi yang lebih tinggi dan pengalaman pembangunan yang lebih baik, dan telah menjadi pilihan pertama banyak pembangun. Dalam VUE3, menggunakan extends untuk mewarisi komponen ialah kaedah pembangunan yang sangat praktikal Artikel ini akan memperkenalkan cara menggunakan extends untuk mewarisi komponen. Apa itu extends? Dalam Vue, extends ialah atribut yang sangat praktikal, yang boleh digunakan untuk komponen kanak-kanak diwarisi daripada ibu bapa mereka.
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
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
Vue dan Vue-Router: Bagaimana untuk berkongsi data antara komponen?
Dec 17, 2023 am 09:17 AM
Vue dan Vue-Router: Bagaimana untuk berkongsi data antara komponen? Pengenalan: Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Vue-Router ialah pengurus penghalaan rasmi Vue, digunakan untuk melaksanakan aplikasi satu halaman. Dalam aplikasi Vue, komponen ialah unit asas untuk membina antara muka pengguna. Dalam banyak kes kita perlu berkongsi data antara komponen yang berbeza. Artikel ini akan memperkenalkan beberapa kaedah untuk membantu anda mencapai perkongsian data dalam Vue dan Vue-Router, dan
Amalan komponen Vue: pembangunan komponen halaman
Nov 24, 2023 am 08:56 AM
Amalan komponen Vue: Pengenalan kepada pembangunan komponen halaman Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod. Teknologi tindanan Vue.js2.xJavaScript (ES6) HTML5 dan persekitaran pembangunan CSS3
