快捷導(dǎo)航

vue跳轉(zhuǎn)到詳情頁的兩種實(shí)現(xiàn)方法

更新時(shí)間：2023年06月12日 14:47:46 作者：#小裁

最近接觸了vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁的兩種實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

路由跳轉(zhuǎn)過程中的參數(shù)傳遞

業(yè)務(wù)場(chǎng)景：在電影列表頁面中點(diǎn)擊某一項(xiàng)的點(diǎn)擊名稱，跳轉(zhuǎn)到電影詳情頁，查看選中電影的詳細(xì)信息。這個(gè)過程就需要在跳轉(zhuǎn)的同時(shí)傳遞電影ID作為參數(shù)，這樣，詳情頁才可以獲取到選中項(xiàng)的ID，從而發(fā)送請(qǐng)求，查詢?cè)敿?xì)信息。

1. 準(zhǔn)備一個(gè)電影列表頁：List.vue 一個(gè)電影詳情頁：Detail.vue

2. 配置路由：

a. 當(dāng)訪問地址：http://localhost:8080/list時(shí)，看到列表頁。

b. 當(dāng)訪問地址：http://localhost:8080/detail時(shí)，看到詳情頁。

3. 注意：需要在App.vue中添加占位符：

路由跳轉(zhuǎn)過程中的參數(shù)傳遞方式1

通過在請(qǐng)求資源路徑后用?拼接查詢字符串的方式，傳遞參數(shù)：

<router-link to="/detail?id=7&name=zs">xx</router-link>

方法一: 問號(hào)版

List.vue列表頁: 列表項(xiàng)填入router-link標(biāo)簽

  <template>
  <tbody>
  <tr v-for="(item, i) in data.result" :key="item.id">
  <td>
  <router-link :to="`/detail?id=${item.id}`">//問號(hào)版的
  {{item.title}}
</router-link>
  </td>
  </tr>
  </tbody>
  </template>

detail.vue詳情頁：

 <template>
  <div>
  <h2>電影詳情頁</h2>
  <p>電影名稱：{{movieDate.title}}</p>
  <p>電影類型：{{movieData.type}}</p>
  </div>
  </template>
  <script>
  import  myaxios from './http/MyAxios'
export default{	
  data( ){
    return{
      movieData:{ },//綁定電影對(duì)象
    }
  },
  mounted( ){  //當(dāng)前主鍵已經(jīng)掛載到DOM上，（已展示）時(shí)被vue自動(dòng)調(diào)用
    console.log('生命周期方發(fā)mounted被調(diào)用')
    let  id  = this.$router.query.id  //接收請(qǐng)求路徑后的   ？key= value  格式的參數(shù)id
    console.log('接收到參數(shù)id:' + id)
    let url  = "https://web.codeboy.com/bmdapi/movie-info/query"
    myaxios.get(url,{ id }).then(res =>{
      console.log(res)  //res.data.data中存儲(chǔ)了電影對(duì)象{ }
      this.movieDate = res.data.data
    })
  }
};
</script>

方法二：不帶問號(hào)版的

<router-link to="/detail/7">xx</router-link>
this.$router.push('/detail/7')

目標(biāo)頁如何接收該參數(shù)？

1、配置路由：

{
path:'/detail/:id',
component: ( ) => import 'Detail.vue'
}

該路由的配置，將會(huì)匹配：

/detail/7    =>   id:7
/detail/123  =>   id:123
/detail/abc  =>   id:abc

vue將會(huì)自動(dòng)封裝路徑參數(shù)，放入this.$route.params屬性中。如下即可獲取該參數(shù)：

mounted(){
  	let  id = this.$route.params.id
}

List.vue列表頁: 列表項(xiàng)填入router-link標(biāo)簽

<template>
   <tbody>
        <tr v-for="(item, i) in data.result" :key="item.id">
          <td>
          <img  :src="item.cover"  width="60px"
			@click="$router.push(`/detail/${item.id}`)">
          </td>
        </tr>
      </tbody>
</template>

router/index.js配置路由頁：

{
paht:  '/detail/:id',
name: 'detail',
component: ( ) =>import ('../Detail.vue')
}

detail.vue詳情頁：

<template>
<div>
<h2>電影詳情頁</h2>
<p>電影名稱：{{movieDate.title}}</p>
<p>電影類型：{{movieData.type}}</p>
</div>
</template>
<script>
import  myaxios from './http/MyAxios'
   export default{	
data( ){
return{
movieData:{ },//綁定電影對(duì)象
}
},
mounted( ){  //當(dāng)前主鍵已經(jīng)掛載到DOM上，（已展示）時(shí)被vue自動(dòng)調(diào)用
console.log('生命周期方發(fā)mounted被調(diào)用')
let  id  = this.$router.params.id  //接收路徑參數(shù)： /detail/id   格式的參數(shù)id
console.log('接收到參數(shù)id:' + id) 
let url  = "https://web.codeboy.com/bmdapi/movie-info/query"
myaxios.get(url,{ id }).then(res =>{
console.log(res)  //res.data.data中存儲(chǔ)了電影對(duì)象{ }
this.movieDate = res.data.data
})
}
};
</script>