Vue的Router路由傳參

時間 2020-08-01

標籤 vue router 路由欄目系統網絡简体版

原文原文鏈接

1、文件結構css

2、vue.jshtml

打開此連接 https://cdn.bootcss.com/vue/2.6.10/vue.js　vue

複製粘貼頁面的全部內容vue-router

3、vue-router.jsapp

打開此連接　https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js函數

複製粘貼頁面的全部內容ui

4、index.htmlthis

 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>

5、app.jsurl

 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 })