路由传值的三种方式

图一 phone 页面 点击 三个li 跳到详情页

 

图二 详情页面 ，点击上面不同的li 显示不同的内容

 

 

 

 

 

 

phone.vue 相关的代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<template>     <div>       <ul>         <li @click="toXq(item.id)" v-for="(item,index) in lis" :id=item.id>{{item.name}}</li>       </ul>     </div> </template>   <script>     export default {         name: "Phone",       data(){           return{             lis:[               {name:"苹果",id:"1001"},               {name:"华为",id:"1002"},               {name:"小米",id:"1003"},             ],             id:'',           }       },       methods:{           //方法一         toXq(id){           console.log(id);           this.$router.push({             path:"Xq",             query:{               id:id             }           })         }           //方法二         // toXq(id){         //   console.log(id);         //   this.$router.push({         //     name:"Xq",         //     params:{         //       id:id         //     }         //   })         // }           //方法三         // toXq(id){         //   console.log(id);         //   this.$router.push('./Xq'+id)         // }           }     } </script>   <style scoped>   </style>

　　Xq.vue相关的代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<template>     <div>       <span @click="back()"><返回</span>       <h1>详情页</h1>       <ul>         <li v-for="item in xqlis" :key="item.id" v-show="getId==item.id" @click="pd()">{{item.ms}}</li>       </ul>       <!--  方法一接收  -->       <!--{{this.$route.query.id}}-->         <!--  方法二接收  -->       <!--{{this.$route.params.id}}-->         <!--  方法三接收  -->       <!--{{this.$route.params.id}}-->     </div> </template>   <script>     export default {         name: "Xq",       data(){           return{             xqlis:[               {id:1001,ms:"这是苹果详情页信息"},               {id:1002,ms:"这是华为详情页信息"},               {id:1003,ms:"这是小米详情页信息"},             ],             getId:this.$route.query.id         }       },       created(){},         methods:{           back(){             this.$router.back();           },         },       } </script>   <style scoped> li{   list-style-type: none; } </style>

　　路由 index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Cart from '../components/Cart' import Parent from '../components/Parent' import Son from '../components/Son' import Xq from '../components/Xq' import Phone from '../components/Phone'     Vue.use(Router)   export default new Router({   routes: [       {       path: '/',       redirect: 'Home',     },     {       path: '/home',       name: 'Home',       component: Home     },     {       path: '/cart',       name: 'Cart',       component: Cart     },     {       path: '/parent',       name: 'Parent',       component: Parent     },     {       path: '/son',       name: 'Son',       component: Son     },       {       //方式一 二路由路径       path: '/xq',       //方式三路由路径       // path: '/xq:id',       name: 'Xq',       component: Xq     },     {       path: '/phone',       name: 'Phone',       component: Phone     },   ] })