vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue跳转到详情页

vue跳转到详情页的两种实现方法

作者:#小裁

最近接触了vue项目,下面这篇文章主要给大家介绍了关于vue跳转到详情页的两种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

路由跳转过程中的参数传递

业务场景:在电影列表页面中点击某一项的点击名称,跳转到电影详情页,查看选中电影的详细信息。这个过程就需要在跳转的同时传递电影ID作为参数,这样,详情页才可以获取到选中项的ID,从而发送请求,查询详细信息。

1. 准备一个电影列表页:List.vue 一个电影详情页:Detail.vue

2. 配置路由:

a. 当访问地址:http://localhost:8080/list时,看到列表页。

b. 当访问地址:http://localhost:8080/detail时,看到详情页。

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

路由跳转过程中的参数传递方式1

通过在请求资源路径后用?拼接查询字符串的方式,传递参数:

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

方法一: 问号版

List.vue列表页: 列表项填入router-link标签

  <template>
  <tbody>
  <tr v-for="(item, i) in data.result" :key="item.id">
  <td>
  <router-link :to="`/detail?id=${item.id}`">//问号版的
  {{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:{ },//绑定电影对象
    }
  },
  mounted( ){  //当前主键已经挂载到DOM上,(已展示)时被vue自动调用
    console.log('生命周期方发mounted被调用')
    let  id  = this.$router.query.id  //接收请求路径后的   ?key= value  格式的参数id
    console.log('接收到参数id:' + id)
    let url  = "https://web.codeboy.com/bmdapi/movie-info/query"
    myaxios.get(url,{ id }).then(res =>{
      console.log(res)  //res.data.data中存储了电影对象{ }
      this.movieDate = res.data.data
    })
  }
};
</script>

方法二:不带问号版的

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

目标页如何接收该参数?

1、配置路由:

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

该路由的配置,将会匹配:

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

vue将会自动封装路径参数,放入this.$route.params属性中。如下即可获取该参数:

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

List.vue列表页: 列表项填入router-link标签

<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:{ },//绑定电影对象
}
},
mounted( ){  //当前主键已经挂载到DOM上,(已展示)时被vue自动调用
console.log('生命周期方发mounted被调用')
let  id  = this.$router.params.id  //接收路径参数: /detail/id   格式的参数id
console.log('接收到参数id:' + id) 
let url  = "https://web.codeboy.com/bmdapi/movie-info/query"
myaxios.get(url,{ id }).then(res =>{
console.log(res)  //res.data.data中存储了电影对象{ }
this.movieDate = res.data.data
})
}
};
</script>

总结

到此这篇关于vue跳转到详情页的两种实现方法的文章就介绍到这了,更多相关vue跳转到详情页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文