vue路由傳參的幾種基本方式

原文地址

---

this.$router.push跳轉

現有以下場景，點擊父組件的li元素跳轉到子組件中，並攜帶參數，便於子組件獲取數據。
父組件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

getDescribe(id) { // 直接調用$router.push 實現攜帶參數的跳轉 this.$router.push({ path: `/describe/${id}`, })

方案一，須要對應路由配置以下：

{
     path: '/describe/:id', name: 'Describe', component: Describe }

很顯然，須要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可使用來獲取傳遞的參數值。

this.$route.params.id

方案二：

父組件中：經過路由屬性中的name來肯定匹配的路由，經過params來傳遞參數。

this.$router.push({ name: 'Describe', params: { id: id } })

對應路由配置: 注意這裏不能使用:/id來傳遞參數了，由於父組件中，已經使用params來攜帶參數了。

{
     path: '/describe', name: 'Describe', component: Describe }

子組件中: 這樣來獲取參數

this.$route.params.id

方案三：

父組件：使用path來匹配路由，而後經過query來傳遞參數
這種狀況下 query傳遞的參數會顯示在url後面?id=？

this.$router.push({ path: '/describe', query: { id: id } })

對應路由配置：

{
     path: '/describe', name: 'Describe', component: Describe }

對應子組件: 這樣來獲取參數

this.$route.query.id

下面整理一下params傳參和query傳參的差異：

一、用法上的

　　剛纔已經說了，query要用path來引入，params要用name來引入，接收參數都是相似的，分別是this.$route.query.name和this.$route.params.name。

注意接收參數的時候，已是$route而不是$router了哦！！

二、展現上的

　　query更加相似於咱們ajax中get傳參，params則相似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示。

---

原文地址

router-link跳轉

params傳參（url中顯示參數）

文件結構

 

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

/* eslint-disable*/

//第一步：引用vue和vue-router ，Vue.use（VueRouter）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//第二步：引用定義好的路由組件
import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'
import Log from '../components/log.vue'
import Reg from '../components/reg.vue'

//第三步：定義路由（路由對象包含路由名、路徑、組件、參數、子路由等），每個路由映射到一個組件
//第四步：經過new Router來建立router實例
export default new Router({
　　mode: 'history',
　　routes: [
　　　　{
　　　　　　path: '/one',
　　　　　　name: 'ChildOne',
　　　　　　component: ChildOne,
　　　　　　children:[
　　　　　　　　{
　　　　　　　　　　path:'/one/log/:num',
　　　　　　　　　　component:Log,
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path:'/one/reg/:num',
　　　　　　　　　　component:Reg,
　　　　　　　　},
　　　　　　],
　　　　},
　　　　{
　　　　　　path: '/two',
　　　　　　name: 'ChildTwo',
　　　　　　component: ChildTwo
　　　　}
　　]
})

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

<template>
　　<div style="border:1px solid red;color:red;">
　　　　<p>這是父路由childOne對應的組件頁面</p>
　　　　<p>下面能夠點擊顯示嵌套的子路由 </p>
　　　　<router-link to="/one/log/123">顯示登陸頁面</router-link>
　　　　<router-link to="/one/reg/002">顯示註冊頁面</router-link>
　　　　<router-view></router-view>
　　</div>
</template>

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

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

效果：

 

 

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

 

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

 

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

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

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/one',
            name: 'ChildOne',
            component: ChildOne,
            children:[
                {
                    path:'/one/log/',
                    name:'Log',
                    component:Log,
                },
                {
                path:'/one/reg/',
                name:'Reg',
                component:Reg,
                },
            ],
        },
        {
            path: '/two',
            name: 'ChildTwo',
            component: ChildTwo
        }
    ]
})                

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

<template>
    <div style="border:1px solid red;color:red;">
        <p>這是父路由childOne對應的組件頁面</p>
        <p>下面能夠點擊顯示嵌套的子路由 </p>
        <router-link :to="{name:'Log',params:{num:666}}">顯示登陸頁面</router-link>
        <router-link :to="{name:'Reg',params:{num:888}}">顯示註冊頁面</router-link>
        <router-view></router-view>
    </div>
</template>

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

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

 

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

 

使用Query實現路由傳參

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

export default new Router({
　　mode: 'history',
　　routes: [
　　　　{
　　　　　　path: '/one',
　　　　　　name: 'ChildOne',
　　　　　　component: ChildOne,
　　　　　　children:[
　　　　　　　　{
　　　　　　　　　　path:'/one/log/',
　　　　　　　　　　component:Log,
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　path:'/one/reg/',
　　　　　　　　　　component:Reg,
　　　　　　　　},
　　　　　　],
　　　　},
　　　　{
　　　　　　path: '/two',
　　　　　　name: 'ChildTwo',
　　　　　　component: ChildTwo
　　　　}
　　]
})

　　

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

<template>
　　<div style="border:1px solid red;color:red;">
　　　　<p>這是父路由childOne對應的組件頁面</p>
　　　　<p>下面能夠點擊顯示嵌套的子路由 </p>
　　　　<router-link :to="{path:'/one/log',query:{num:123}}">顯示登陸頁面</router-link>
　　　　<router-link :to="{path:'/one/reg',query:{num:999}}">顯示註冊頁面</router-link>
　　　　<router-view></router-view>
　　</div>
</template>

　　

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

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

　　

效果以下：

 

 

 

PS: 在第一步的定義路由中咱們都使用了mode：history 做用就是去除路由跳轉時路由路徑前的 「#」

經常使用的mode模式有兩種：

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

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

默認不使用mode：history 以下

 

---

返回目錄