Three ways to pass the value of the route

Figure a phone details page click on the page to jump to three li

 

Figure II details page, click on the above different li show different content

 

 

 

 

 

 

phone.vue relevant code

<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:{ 
          the console.log (ID);
        toXq (ID) {
          // A method
          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 relevant code

<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",
              {the above mentioned id: 1001, MS: "This is Apple's details page"},
            xqlis: [
          return {
      the Data () {
              {ID: 1002, MS: "This is the page before Huawei"},
              {id: 1003, ms: "This is millet details page"}, 
            ], 
            getId:. the this $ route.query.id 
        } 
      }, 
      the Created () {}, 

      Methods: { 
          the Back () { 
            the this $ Router.. Back (); 
          }, 

      }, 

    } 
</ Script> 

<style scoped> 
Li { 
  List-style-type: none; 
} 
</ style>

　　Routing index.js

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: 'the Parent', 
      Component: the Parent 
    }, 
    { 
      path: '/ Son', 
      name: 'Son', 
      Component: Son 
    }, 

    { 
      // embodiment twelve routing path 
      path: ' / XQ ', 
      // embodiment three routing path 
      // path:' / XQ: ID ', 
      name:' Xq ', 
      Component: Xq 
    }, 
    { 
      path:' / Phone ', 
      name:' Phone ', 
      Component: Phone 
    } , 
  ] 
})