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'exportdefault{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'exportdefault{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>