前言

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

概念

1、vue路由傳參

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

2、vue路由重定向

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

實(shí)際使用場景

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

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

路由傳參

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

1、使用步驟

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

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

2、params傳參

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

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

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

//傳參的設(shè)置

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

//這個(gè)組件對(duì)應(yīng)的路由配置

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

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

this.$route.params.id

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

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

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

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

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

//這個(gè)組件對(duì)應(yīng)的路由配置

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

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

this.$route.params.id

3、query傳參

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

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

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

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

//這個(gè)組件對(duì)應(yīng)的路由配置

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

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

this.$route.params.id

4、url字符串拼接

        url字符串拼接，相當(dāng)于直接在跳轉(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訪問當(dāng)前路由對(duì)象。這里再簡單說明下$router和$route的區(qū)別:

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

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

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

6、路由傳參的示例

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

父組件：

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

方法一：

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

需要對(duì)應(yīng)路由配置如下：

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

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

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

this.$route.params.id

方法二：

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

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

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

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

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

this.$route.params.id

方法三：

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

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

對(duì)應(yīng)路由配置：

   {
      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í)行/根目錄路由地址的時(shí)候，頁面就跳轉(zhuǎn)執(zhí)行/home路由地址 ，進(jìn)而把對(duì)應(yīng)的組件給展示出來。

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

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

2、實(shí)際示例

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

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

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

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

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

示例二：在沒有任何#錨點(diǎn)信息的時(shí)候，顯示首頁組件。

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

其他

再分享一種路由跳轉(zhuǎn)的方式：在需要跳轉(zhuǎn)的地方使用router-link進(jìn)行界面的跳轉(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方式對(duì)象形式傳參

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

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

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

       具體實(shí)際示例如下所示，傳遞參數(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ū)別，該篇文章里面詳細(xì)的介紹了vue-router以及vue路由相關(guān)的所有內(nèi)容，這里不再過多贅述。

最后

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

最新評(píng)論