前言

前端開發(fā)過程中，作為前端開發(fā)者來說關(guān)于vue的使用并不陌生，vue相關(guān)常用的知識點也是非常重要的，不管是在實際開發(fā)中還是在求職面試中都很重要。在vue使用中，路由相關(guān)的知識點是非常重要的，而且在實際開發(fā)中也是必用知識點，那么本篇博文就來聊聊vue的路由參數(shù)傳遞和路由重定向相關(guān)的知識點。

概念

1、vue路由傳參

在使用vue開發(fā)中，路由傳參是指在嵌套路由的時候，父路由向子路由傳遞參數(shù)，否則的話傳參操作無效的。路由傳參方式分為：params傳參、query傳參和url字符串拼接，其中，params傳參又分為在url中顯示參數(shù)和不顯示參數(shù)兩種方式。在實際使用過程中，需要知道路由跳轉(zhuǎn)并傳參的方式(聲明式導航和編程式導航)以及接收路由參數(shù)的方法等。

2、vue路由重定向

在使用vue開發(fā)中，路由重定向指的是用戶在訪問地址A 的時候，強制跳轉(zhuǎn)到地址D ，從而展示特定的組件頁面；通過路由規(guī)則的 redirect 屬性，指定一個新的路由地址，可以很方便地設置路由的重定向。

實際使用場景

在實際開發(fā)中，經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同一個組件。比如，現(xiàn)在有一個 Student組件，對于所有ID各不相同的學生用戶，都要使用這個組件來渲染，這時候就需要使用傳遞參數(shù)來實現(xiàn)了。

在實際場景中的另一個情況，在用戶首次訪問網(wǎng)站頁面("/根目錄"首頁)時，地址欄里邊沒有“#錨點”的信息，也就沒有對應的組件用于顯示，這樣的話用戶體驗不好，可以通過重定向?qū)崿F(xiàn)一種效果，即當瀏覽器沒有任何 #錨點信息時，默認也給顯示一個組件，即當用戶在打開訪問地址A的時候，根據(jù)實際業(yè)務場景需要跳轉(zhuǎn)到地址C，此時就需要使用路由重定向來實現(xiàn)。

路由傳參

路由傳參方式分為：params傳參、query傳參和url字符串拼接。

1、使用步驟

• 更改父組件綁定的子組件路由名稱以及傳遞的參數(shù)；
• 更改路由配置文件子組件路徑中添加的參數(shù)，以及修改名稱；
• 更改子組件<template>內(nèi)容，主要是用于展示。

注意：不要在<template>中直接添加獲得的參數(shù)，需要在外層加標簽包含起來。

2、params傳參

在params傳參使用中，只能使用name，不能用path，地址欄中不顯示參數(shù)名稱id，此方式可以理解為ajax中的post方法，但是有參數(shù)的值，但是當頁面刷新了之后是獲取不到參數(shù)值的，也就是刷新頁面之后傳遞的參數(shù)會丟失。而且通過params傳遞參數(shù)，若想獲取 id 的參數(shù)值，可以通過this.$route.params.id這種方式獲取即可。

注意：獲取參數(shù)的時候是$route，跳轉(zhuǎn)和傳參的時候是$router。

具體的使用示例如下所示：

//傳參的設置

this.$router.push({
 name:"home",　
 //這里的params是一個對象，id是屬性名，item.id是值(是從當前組件或者Vue實例上直接取到的值)
 params:{id:item.id}
 })

//這個組件對應的路由配置

{　　
//組件路徑
path: '/home',
//組件的別名
name: 'home',　
//組件名稱
component: Home,
}

//獲取路由傳遞參數(shù)的方法

this.$route.params.id

2-1、路由屬性配置參數(shù)

在使用路由屬性配置參數(shù)時候，通過路由屬性配置傳參可以用this.$route.params.id來獲取到傳遞過來id的值。地址欄中不顯示參數(shù)名稱id，此方式可以理解為ajax中的post方法，但是有參數(shù)的值，但是當頁面刷新了之后是獲取不到參數(shù)值的，也就是刷新頁面之后傳遞的參數(shù)會丟失。

注意：this.$router.push方法里面路徑帶的是值，路由配置項那里帶的是變量名(屬性名)來實現(xiàn)的對應參數(shù)傳遞。

具體的使用示例如下所示：

this.$router.push({
  name:"/home/${item.id}",
})

//這個組件對應的路由配置

{ 　　
//組件路徑
path: '/home:id', 
 
//組件別名
name: 'home', 　　
 
//組件名
component: Home,
}

//獲取路由傳遞參數(shù)的方法

this.$route.params.id

3、query傳參

在query傳參使用中，name和path都能用。其中，在用path的時候，提供的path值必須是相對于根路徑的相對路徑，而不是相對于父路由的相對路徑，否則無法成功訪問路由。傳參的地址欄顯示參數(shù)格式為?id=1&index=1。

注意：query傳參，可以解決頁面刷新參數(shù)消失/丟失問題，此方式可以理解為ajax中的get方法，參數(shù)是直接在url后面添加，參數(shù)是顯示可見的，所以在解決頁面刷新參數(shù)消失/丟失問題就使用該方法來解決。

具體的使用示例如下所示：

this.$router.push({
name:"/home",　　　　
 query:{id：item.id}
})

//這個組件對應的路由配置

{ 　　
//組件路徑
path: '/home', 　　
 
//組件別名
name: 'home', 　　
 
//組件名
component: Home,
 }

//獲取路由傳遞參數(shù)的方法

this.$route.params.id

4、url字符串拼接

        url字符串拼接，相當于直接在跳轉(zhuǎn)的路由鏈接中拼接參數(shù)，具體示例如下所示：

        url中直接帶url類型

http://localhost:8080/#/myDetail/123

        url中拼接請求參數(shù)

http://localhost:8080/#/myDetail?useId=123

5、接收路由參數(shù)的方法，分 ? 和 : 兩種接收方式

  首先，通過注入路由器，我們可以在任何組件內(nèi)通過 this.$router訪問路由器，也可以通過this.$route訪問當前路由對象。這里再簡單說明下$router和$route的區(qū)別:

• $router是指整個路由實例，可以操控整個路由,通過'$router.push'往其中添加任意的路由對象；
• $route是指當前路由實例('$router')跳轉(zhuǎn)到的路由對象；
• 路由實例可以包含多個路由對象.它們是父子包含關(guān)系，其中$router是路由實例，$route是路由對象。

1??、?形式的參數(shù)使用this.$route.query接收參數(shù)，獲取到的結(jié)果是一個對象；

2??、:形式的參數(shù)使用this.$route.params接收參數(shù)，獲取到的結(jié)果是一個對象。

6、路由傳參的示例

這里介紹一個路由傳參數(shù)的綜合示例，方便對比介紹，使用場景為點擊父組件的li元素跳轉(zhuǎn)到子組件中，并且?guī)в袇?shù)，具體如下所示：

父組件：

<li v-for="fruit in fruit" @click="getDes(fruit.id)"> 
 
methods:

方法一：

getDes(id) {
//  直接調(diào)用$router.push實現(xiàn)攜帶參數(shù)跳轉(zhuǎn)
this.$router.push({
path: `/fruit/${id}`,
})

需要對應路由配置如下：

   {
     path: '/fruit/:id',
     name: ‘Fruit',
     component: Fruit
    }

很明顯，需要在path中添加/:id，來對應 $router.push 中path攜帶的參數(shù)。

在子組件中獲取傳遞的參數(shù)值的方式如下：

this.$route.params.id

方法二：

父組件中：通過路由屬性中的name來確定匹配路由，使用params來傳遞參數(shù)。

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

對應路由配置: 可以添加:/id 也可以不添加，添加數(shù)據(jù)會在url后面顯示，不添加數(shù)據(jù)就不會顯示

  {
     path: '/fruit',
     name: 'Fruit',
     component: Fruit
   }

在子組件中獲取傳遞的參數(shù)值的方式如下：

this.$route.params.id

方法三：

父組件中：使用path來匹配路由，然后使用query來傳遞參數(shù)。這種情況下query傳遞的參數(shù)會顯示在url后面?id=？

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

對應路由配置：

   {
      path: '/fruit',
     name: 'Fruit',
     component: Fruit
    }

在子組件中獲取傳遞的參數(shù)值的方式如下：

this.$route.params.id

路由重定向

1、路由重定向語法

var router = new VueRouter({
      routes:[
    {path:'/', redirect:'/home'}, // {path:'/', redirect:'跳轉(zhuǎn)到的路由地址'}
     {path:'/home', component:Home}
      ]
})

上面語法指的是，在執(zhí)行/根目錄路由地址的時候，頁面就跳轉(zhuǎn)執(zhí)行/home路由地址 ，進而把對應的組件給展示出來。

注意：不僅僅“/” 可以被重定向，而且其他普通路由地址互相也可以重定向。其中，重定向會使得路由再次發(fā)生調(diào)用請求。

其實，路由重定向也是通過 routes 配置來完成，通過使用路由規(guī)則的redirect屬性，指定一個新的路由地址，可以很方便地設置路由的重定向。

2、實際示例

路由重定向的使用比較簡單，這里直接舉實際使用例子來分析，具體示例如下所示。

示例一：從路由/mine 重定向到 /

const routes = [{ path: '/mine', redirect: '/' }];

又如從路由/home 重定向到 /main

        {
          path: '/home',
          redirect:'/main'
         }

示例二：在沒有任何#錨點信息的時候，顯示首頁組件。

var router = new VueRouter({
    routes: [   
         // 其中，path 表示需要被重定向的原地址，redirect 表示將要被重定向到的新地址。當用戶在地址欄中輸入`/`,會自動的跳轉(zhuǎn)到`/home`，而`/home`對應的組件為Home
        {path:'/', redirect: '/home'},
       {path:'/home',component: Home},
     ]
   })

其他

再分享一種路由跳轉(zhuǎn)的方式：在需要跳轉(zhuǎn)的地方使用router-link進行界面的跳轉(zhuǎn)以及傳參數(shù)，如下所示：

1. 使用to直接構(gòu)建跳轉(zhuǎn)路由，不帶參數(shù)

<router-link to="/home">首頁</router-link>

2. 使用to構(gòu)建跳轉(zhuǎn)路由（含傳參數(shù)），url拼接傳參

<router-link :to="'/home/'+111"></router-link>
 
<router-link :to="{‘/home?id=111'}"></router-link>

3.使用to構(gòu)建跳轉(zhuǎn)路由（含傳參數(shù)），query方式對象形式傳參

<router-link :to="{path:‘/home',query:{id:111}}”></router-link>

4.使用to構(gòu)建跳轉(zhuǎn)路由（含傳參數(shù)），params方式對象形式傳參

<router-link :to="{name:‘/home',params:{id:111}}”></router-link>

       具體實際示例如下所示，傳遞參數(shù)分為三步：

1??、首先要使用的路由下路徑給上要傳的參數(shù)，路由還需要給上路由名字

          path:'/fruit/:id',
          component:Fruit,
          name:'Fruit'

2??、修改連接方式，直接在to前面綁定上v-bind:

          <el-menu-item index="1-1">
                <router-link :to="{name:'Fruit',params:{id:111}}"></router-link>
           </el-menu-item>

3??、具體組件中使用

<template>
<div> {{$route.params.id}}</div>
</template>
<script>
    export default {
        name: “fruit”
    }
</script>
 
<style scoped>
</style>

拓展

關(guān)于vue中vue-router的使用以及兩種模式的區(qū)別，可以參考這篇文章：vue-router的使用以及兩種模式的區(qū)別，該篇文章里面詳細的介紹了vue-router以及vue路由相關(guān)的所有內(nèi)容，這里不再過多贅述。

最后

通過本文關(guān)于前端開發(fā)中Vue路由傳遞參數(shù)和重定向的使用總結(jié)的介紹，如果認真閱讀并且實踐示例，應該會很好的掌握這些知識點，雖然篇幅的內(nèi)容不少，但是分開來看會覺得沒那么復雜，同時也整合了其他的匯總，是一篇值得閱讀的文章，尤其是對于由傳遞參數(shù)和重定向知識點在求職面試中甚為重要，而且在實際開發(fā)中也是必用知識點，所以說這個知識點是必備的，重要性就不在贅述。歡迎關(guān)注，一起交流，共同進步。

最新評論