通過VueRouter來實現組件之間的跳轉：參數的傳遞，具體內容如下
login ---用戶名--->main
①明確發送方和接收方
②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
③接收方獲取傳遞來的數據
this.$route.params.id
④跳轉的時候，發送參數
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳轉</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> //創建主頁面組件 var myMain = Vue.component("main-component",{ //保存登錄傳遞過來的數據 data:function(){ return { uName:'' } }, template:` <div> <h1>主頁面用戶名:{{uName}}</h1> </div> `, //掛載該組件時自動拿到數據 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:` <div> <h1>登錄頁面</h1> <input type="text" v-model="userInput" placeholder="請輸入用戶名"> <button @click="toMain">登錄到主頁面</button> <br> <router-link :to="'/main/'+userInput">登錄到主頁面</router-link> </div> ` }) var NotFound = Vue.component("not-found",{ template:` <div> <h1>404 Page Not Found</h1> <router-link to="/login">返回登錄頁</router-link> </div> ` }) //配置路由詞典 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> <div id="container"> <p>{{msg}}</p><!-- --> <router-view></router-view> </div> <script>//創建產品列表組件 var myList = Vue.component("product-list",{ //保存產品列表的數據 data:function(){ return{ productList:["蘋果","華為","三星","小米","vivo"] } }, template:` <div> <h4>這是列表頁</h4> <ul> <li v-for="(tmp,index) in productList"> //將index傳遞過去 <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link> </li> </ul> </div> ` })//詳情頁組件 var myDetail = Vue.component("product-detail",{ //保存傳遞過來的index data:function(){ return{ myIndex:"" } }, //在掛載完成后,將接收到的index賦值給myIndex mounted:function(){ this.myIndex = this.$route.params.id; }, template:` <div> <h4>這是詳情頁</h4> <p>這是id為：{{myIndex}}的產品</p> </div> ` })//頁面找不到的時候 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>
新聞熱點
疑難解答
圖片精選
