路由傳值的三種方式

圖一 phone 頁面 點擊 三個li 跳到詳情頁

 

圖二 詳情頁面 ，點擊上面不同的li 顯示不同的內容

 

 

 

 

 

 

phone.vue 相關的代碼

<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相關的代碼

<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

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
    },
  ]
})