位置: IT常识 - 正文
vue中跳转到详情页的两种方法(vue带参数跳转到详情页面)
编辑：rootadmin推荐整理分享vue中跳转到详情页的两种方法(vue带参数跳转到详情页面)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue点击跳转页面传参,vue带参数跳转到详情页面,vue中跳转详情页路由配置,vue项目页面跳转,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:abcvue将会自动封装路径参数，放入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 格式的参数idconsole.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>上一篇：怎么移除css的hover事件(css去掉项目符号)
下一篇：Access-Control-Expose-Headers 响应报头、跨域 公开响应头
