vue根据路由ID获取数据,设置html数据

1、在右路中跳转设置参数

 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id  }}">
 		<img :src="phone.image[0].image1"/>
 </router-link>`

2、引入全部数据,在被跳转到的vue页面,获取路由地址id。

		 import phonedata from '../lib/shoppingPhoneData'
   		 data (){
    			return{
    				phonedata,
    				id : this.$route.query.id,
    				item:[]
    			}
    		},

3、在全部数据(phonedata)中找到与id对应的数据,页面一加载就执行mounted()函数

	  mounted(){
			for(var i=0;i<phonedata.length;i++){
				if(phonedata[i].id==this.id){
					this.item=phonedata[i]				
				}
			}
		}

4、在html中使用对应的数据

					 <div class="price-main">
    						<div class="fontMin floatL price-title">价格</div>
    						<div class="floatL price-count">
    							<span>¥</span>{{item.price}}
    						</div>
    					</div>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现: 1. 在新闻列表页面中,每个新闻都应该有一个唯一的标识,可以是数据库中的 ID 或者其他的标识符,比如新闻标题。使用这个标识符可以在点击新闻时,获取到对应的新闻数据。 2. 在点击新闻时,可以使用 Vue Router 中的路由参数来传递新闻标识符。在路由定义中,可以定义一个参数,比如 ":id",来接收这个标识符。 3. 在详情页组件中,可以通过 $route.params.id 来获取路由参数中传递的新闻标识符。然后可以使用这个标识符来从数据库中获取对应的新闻数据。 下面是一个示例代码: 在新闻列表页面中: ```html <template> <div> <ul> <li v-for="news in newsList" :key="news.id"> <router-link :to="'/news/' + news.id">{{ news.title }}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { newsList: [ { id: 1, title: '新闻 1', content: '新闻内容 1' }, { id: 2, title: '新闻 2', content: '新闻内容 2' }, { id: 3, title: '新闻 3', content: '新闻内容 3' }, ], }; }, }; </script> ``` 在路由定义中: ```js import NewsDetail from './NewsDetail.vue'; const routes = [ { path: '/news/:id', component: NewsDetail }, // ... ]; ``` 在详情页组件中: ```html <template> <div> <h2>{{ news.title }}</h2> <p>{{ news.content }}</p> </div> </template> <script> export default { data() { return { news: {}, }; }, mounted() { const newsId = this.$route.params.id; // 从数据库中获取对应的新闻数据 this.news = { id: newsId, title: `新闻 ${newsId}`, content: `新闻内容 ${newsId}`, }; }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值