173.Vue.js智能扫码点餐系统（七）【首页菜品数据渲染、详情页面传值以及数据渲染】2019.03.21

0、知识点

• 页面跳转传值（动态路由、get）

1、跳转传值方式

• 第一种：动态路由
• 在main.js文件中，给Pcontent添加一个id

// 配置路由

const routes = [
  { path: '/start', component: Start },
  { path: '/home', component: Home },
  { path: '/hot', component: Hot },
  { path: '/order', component: Order },
  { path: '/pcontent/:id', component: Pcontent }, // 在pcontent中添加id
  { path: '/search', component: Search },
  { path: '/cart', component: Cart },
  { path: '*', redirect: '/start' }
]

• 测试：从首页跳转到Pcontent详情页

• 在Pcontent.vue中

 mounted(){

            //动态路由

             { path: '/pcontent/:id', component: Pcontent },
              console.log(this.$route.params);
         }

• 第二种：get
• 在Pcontent.vue中

<template>
<div class="p_content">		
			<div class="p_info">				
				<img :src="api+list.img_url"/> // 拼接img的地址				
				<h2>{{list.title}}</h2>		// 输出title的数据内容		
				<p class="price">{{list.price}}}/份</p>  // 输出price的数据内容		
			</div>
			<div class="p_detial">
				<h3>
					商品详情					
				</h3>
				<div class="p_content" v-html='list.content'> // 绑定html，不会让<p>标签在页面中显示
                    
				</div>
			</div>
		</div>
</template>



<script>

//引入config

import  Config from '../model/config.js'
export default{

        data () {
            return {
                  api:Config.api, // 定义api接口
                  list:[]  // 定义一个空数组
            }
        },
        
   methods:{
            requestData(id){  // 定义一个方法requestData

                var api=this.api+'api/productcontent?id='+id // 拼接api接口
                this.$http.get(api).then((response)=>{ // 成功的回调

                    console.log(response);

                    this.list=response.body.result[0]; // 将返回的数据存储到list数组中


                },(err)=>{ // 失败的回调

                    console.log(err); 
                })
            }
        },


// get传值

 mounted(){
 
   var id=this.$route.query.id; // 获取id
    this.requestData(id); // 调用获取数据的方法
 }
 </script>

• 在Home.vue中
• 在首页中，当请求菜品详情时，把菜品的id传递过去，获取到数据的详情

<router-link :to="'/pcontent?id='+food._id'"> // 绑定food的id，使用字符串的方式
			
			<img :src="api+food.img_url" />
			<p class="title">{{food.title}}</p>						
			<p class="price">¥{{food.price}}</p>
									
</router-link>