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>