原

Vue路由傳參的幾種方式

2018年07月28日 23:52:40 廣積糧緩稱王 閱讀數 12613

 

前言：顧名思義，vue路由傳參是指嵌套路由時父路由向子路由傳遞參數，否則操作無效。傳參方式可以划分為params傳參和query傳參，params傳參又可以分為url中顯示參數和不顯示參數兩種方式。具體區分和使用后續分析。

參考官網：https://router.vuejs.org/zh/guide/essentials/navigation.html

params傳參（url中顯示參數）

• 文件結構

• 定義路由：在定義path路由路徑時定義參數名和格式，如  path: "/one/login/:num" ，router>index.js文件如下

1.  
   /* eslint-disable*/
2.  
    
3.  
   //第一步：引用vue和vue-router ，Vue.use（VueRouter）
4.  
   import Vue from 'vue'
5.  
   import Router from 'vue-router'
6.  
   Vue.use(Router)
7.  
    
8.  
   //第二步：引用定義好的路由組件
9.  
   import ChildOne from '../components/childOne'
10.  
    import ChildTwo from '../components/childTwo'
11.  
    import Log from '../components/log.vue'
12.  
    import Reg from '../components/reg.vue'
13.  
     
14.  
    //第三步：定義路由（路由對象包含路由名、路徑、組件、參數、子路由等），每一個路由映射到一個組件
15.  
    //第四步：通過new Router來創建router實例
16.  
    export default new Router({
17.  
    mode: 'history',
18.  
    routes: [
19.  
    {
20.  
    path: '/one',
21.  
    name: 'ChildOne',
22.  
    component: ChildOne,
23.  
    children:[
24.  
    {
25.  
    path: '/one/log/:num',
26.  
    component:Log,
27.  
    },
28.  
    {
29.  
    path: '/one/reg/:num',
30.  
    component:Reg,
31.  
    },
32.  
    ],
33.  
    },
34.  
    {
35.  
    path: '/two',
36.  
    name: 'ChildTwo',
37.  
    component: ChildTwo
38.  
    }
39.  
    ]
40.  
    })

• 在父路由組件上使用router-link進行路由導航，傳參用<router-link to="/one/login/001">的形式向子路由組件傳遞參數。使用router-view進行子路由頁面內容渲染，父路由組件childOne.vue 如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>這是父路由childOne對應的組件頁面 </p>
4.  
   <p>下面可以點擊顯示嵌套的子路由 </p>
5.  
   <router-link to="/one/log/123">顯示登錄頁面 </router-link>
6.  
   <router-link to="/one/reg/002">顯示注冊頁面 </router-link>
7.  
   <router-view> </router-view>
8.  
   </div>
9.  
   </template>

• 子路由通過 this.$route.params.num 的形式來獲取父路由向子路由傳遞過來的參數，子路由組件login.vue如下：

1.  
   <template>
2.  
   <div style="border:1px solid orange;color:orange;">
3.  
   <p>登錄界面：這是另一個嵌套路由的內容 </p>
4.  
   <h3>{{this.$route.params.num}} </h3>
5.  
   </div>
6.  
   </template>

效果：

注意：如上所述路由定義的path: "/one/login/:num"路徑和to="/one/login/001"必須書寫正確，否則不斷點擊切換路由，會因為不斷將傳遞的值顯示添加到url中導致路由出錯，如下

傳遞的值存在url中存在安全風險，為防止用戶修改，另一種方式不在url中顯示傳遞的值

 

params傳參（url中不顯示參數）

• 定義路由時添加name屬性給映射的路徑取一個別名，router>index.js文件修改router如下：

1.  
   export default new Router({
2.  
   mode: 'history',
3.  
   routes: [
4.  
   {
5.  
   path: '/one',
6.  
   name: 'ChildOne',
7.  
   component: ChildOne,
8.  
   children:[
9.  
   {
10.  
    path: '/one/log/',
11.  
    name: 'Log',
12.  
    component:Log,
13.  
    },
14.  
    {
15.  
    path: '/one/reg/',
16.  
    name: 'Reg',
17.  
    component:Reg,
18.  
    },
19.  
    ],
20.  
    },
21.  
    {
22.  
    path: '/two',
23.  
    name: 'ChildTwo',
24.  
    component: ChildTwo
25.  
    }
26.  
    ]
27.  
    })

• 在父路由組件上使用router-link進行路由導航，使用   <router-link :to="{name:'home',params:{id:001}}>    形式傳遞參數。注意   ': to= ' 前面的冒號，childOne.vue組件修改如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>這是父路由childOne對應的組件頁面 </p>
4.  
   <p>下面可以點擊顯示嵌套的子路由 </p>
5.  
   <router-link :to="{name:'Log',params:{num:666}}">顯示登錄頁面 </router-link>
6.  
   <router-link :to="{name:'Reg',params:{num:888}}">顯示注冊頁面 </router-link>
7.  
   <router-view> </router-view>
8.  
   </div>
9.  
   </template>

• 子路由組件頁面獲取父路由傳參方式不變，reg.vue 文件如下：

1.  
   <template>
2.  
   <div style="border:1px solid orange;color:orange;">
3.  
   <p>登錄界面：這是另一個嵌套路由的內容 </p>
4.  
   <h3>子路由獲取的參數：{{this.$route.params.num}} </h3>
5.  
   </div>
6.  
   </template>

 

注意：上述這種利用params不顯示url傳參的方式會導致在刷新頁面的時候，傳遞的值會丟失；

 

 

使用Query實現路由傳參

• 定義路由 router>index.js文件如下：

1.  
   export default new Router({
2.  
   mode: 'history',
3.  
   routes: [
4.  
   {
5.  
   path: '/one',
6.  
   name: 'ChildOne',
7.  
   component: ChildOne,
8.  
   children:[
9.  
   {
10.  
    path: '/one/log/',
11.  
    component:Log,
12.  
    },
13.  
    {
14.  
    path: '/one/reg/',
15.  
    component:Reg,
16.  
    },
17.  
    ],
18.  
    },
19.  
    {
20.  
    path: '/two',
21.  
    name: 'ChildTwo',
22.  
    component: ChildTwo
23.  
    }
24.  
    ]
25.  
    })

• 修改路由導航 <router-link :to="{path:'/one/log',query:{num:123}}"> ，childOne.vue 文件修改如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>這是父路由childOne對應的組件頁面 </p>
4.  
   <p>下面可以點擊顯示嵌套的子路由 </p>
5.  
   <router-link :to="{path:'/one/log',query:{num:123}}">顯示登錄頁面 </router-link>
6.  
   <router-link :to="{path:'/one/reg',query:{num:999}}">顯示注冊頁面 </router-link>
7.  
   <router-view> </router-view>
8.  
   </div>
9.  
   </template>

• 子路由組件通過 this.$route.query.num 來顯示傳遞過來的參數，reg.vue 文件如下：

1.  
   <template>
2.  
   <div style="border:1px solid purple;color:purple;">
3.  
   <p>注冊界面：這是二級路由頁面 </p>
4.  
   <h3>{{this.$route.query.num}} </h3>
5.  
   </div>
6.  
   </template>

效果如下：

 

 

PS: 在第一步的定義路由中我們都使用了mode：history 作用就是去除路由跳轉時路由路徑前的 “#”

常用的mode模式有兩種：

默認為hash模式，最明顯的標志是，URL上有#號 localhost:8080/#/，路由會監聽#后面的信息變化進行路由匹配

另一種為history模式，不會有#出現，很大程度上對URL進行了美化。需要**注意**history模式在打包后的路由跳轉需要服務器配合

默認不使用mode：history 如下