一、文件結構
二、vue.js
打開此鏈接 https://cdn.bootcss.com/vue/2.6.10/vue.js
復制粘貼頁面的所有內容
三、vue-router.js
打開此鏈接 https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js
復制粘貼頁面的所有內容
四、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>title</title> 8 </head> 9 <body> 10 <div id="app"> 11 12 <div> 13 path屬性內傳參 :name <br> 14 獲取傳參 {{$route.params.name}}<br> 15 16 url路徑內傳參 ？age = 18 & sex = 男（不需要加引號！）<br> 17 獲取傳參 {{$route.query.age}} {{$route.query.sex}}<br> 18 19 通過點擊事件，設置setTimeout()方法，間隔時間后， 20 觸發回調函數內的vue實例的router屬性的push（）方法，實現手動路由<br> 21 第一種方式：<br> 22 setTimeout(function(){<br> 23 this.router.push("/username/汪")<br> 24 },2000);<br> 25 <br> 26 第二種方式：<br> 27 //傳入一個對象，name屬性表示路由的名字，params屬性表示需要給哪個參數傳值 28 //比如下面給名稱為username_router的路由中path為/userMessage/:name/:age傳參 29 setTimeout(function(){ <br> 30 this.router.push({name:"userMessage_router",params:{name:"汪",age=27}})<br> 31 },2000);<br> 32 <hr> 33 </div> 34 35 <!-- 上面是重點筆記，結合代碼驗證 --> 36 37 <router-link to="/login">login</router-link> 38 <router-link to="/user/王花花">王花花</router-link> 39 <button @click="surf">漫游</button> 40 <br> 41 <router-link to="/userMessage/未知/未知">我的信息</router-link> 42 <button @click="getMessage">點擊獲取</button> 43 44 <router-view></router-view> 45 </div> 46 47 48 49 <script src="../lib/vue.js"></script> 50 <script src="../lib/vue-router.js"></script> 51 <script src="js/app.js"></script> 52 </body> 53 </html>
五、app.js
1 var routes = [ 2 { 3 path:"/login", 4 component:{ 5 template:` 6 <h1> 7 登錄 8 </h1> 9 ` 10 } 11 }, 12 { 13 path:"/user/:name", 14 name:"myrouter", 15 component:{ 16 template:` 17 <div> 18 我的名字叫{{$route.params.name}}<br> 19 今年{{$route.query.age}}歲了 <br> 20 我是{{$route.query.sex}}生 21 22 <router-link to="more" append>更多信息</router-link> 23 <router-view></router-view> 24 </div> 25 ` 26 }, 27 // 子路由的格式與父路由一樣 28 children:[ 29 { 30 path:"more", 31 component:{ 32 // 子路由繼承父路由的路徑參數params 33 template:` 34 <div> 35 這是{{$route.params.name}}的詳細信息：<br> 36 高配馬公婆趕緊跑了啊東安街公安朵拉購IE的父</div> 37 ` 38 } 39 } 40 ] 41 }, 42 { 43 path:"/userMessage/:name/:age", 44 name:"userMessage_router", 45 component:{ 46 template:` 47 <div> 48 名字：{{$route.params.name}}<br> 49 年齡：{{$route.params.age}} 50 51 </div> 52 ` 53 } 54 } 55 56 ]; 57 58 var router = new VueRouter({ 59 routes 60 }); 61 62 // 設置時間，手動訪問和傳參 63 64 new Vue({ 65 el:"#app", 66 router, 67 methods:{ 68 surf:function(){ 69 // setTimeout()方法，第一個參數為回調函數， 70 // 第二個參數為間隔多少毫秒后，開始出發回調函數 71 setTimeout(function(){ 72 // this.router表示調用Vue實例內部的router屬性，然后再調用其push()方法 73 // push（）方法內傳入需要跳轉的路由路徑 74 this.router.push("/login"); 75 setTimeout(function(){ 76 // this.router.push("/user/汪"); 77 // 手動傳參，傳入一個對象，name屬性表示路由的名字，params屬性表示需要給哪個路徑參數 78 // 傳值 79 this.router.push({name:"myrouter",params:{name:"高富帥"}}); 80 },2000) 81 },2000) 82 }, 83 getMessage:function(){ 84 setTimeout(function(){ 85 // this.router.push("/userMessage/汪/27"); 86 this.router.push({name:"userMessage_router",params:{name:"汪汪",age:28}}) 87 },2000); 88 } 89 } 90 })
六、效果
七、謝謝觀看，如有問題，隨時交流哦