本人刚学完vue，第一次使用vue做项目，使用的技术是vue全家桶。
功能需求是 在首页中每次任意点击一条商家,获取id,然后根据id查询相关数据库，获取想要的数据，最后渲染到同一组件 B组件上。
1.问题1：开始我使用这个导航 <router-link :to="{path:'/shopInfo',query: {id:shopId }}" > 跳转到另一B组件页面上。shopId 是我点击某一条商家之后传给store，然后再用计算属性 shopId（）{return this.$store.state.index.id} 获取的store 中的商家id:
首页和B组件中都能获取并打印这个id，就是在URL后面看不到id的值 写成固定的数字就可以看到，也试了通过中间变量都不行~
2.问题2：我考虑把id通过编程式导航 this.$router.push({ path: /shopInfo/${id} }) 和this.$route.params.id 传给B组件 然后在B组件中通过钩子函数去调用发送请求。查了一下官网，可能用beforeRouteUpdate，但是我没搞懂这个怎么用的？我试了在created中也不行？求大神指导这个如何实现的思路~~谢谢
在Vue单页面应用中，根据后台传过来的不同数据去渲染一个固定样式的组件，可以通过使用模板语言（如HTML、CSS或Vue）以及一些插件或服务来实现。
以下是一个基本的步骤：
items的属性，并在组件中定义一个名为itemsList的模板，用于显示这些信息。javascript
export default {
name: 'ProductList',
props: {
items: {
type: Array,
required: true
}
},
template: `<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>`
}
在你的后台，将产品信息发送到前端。你可以使用HTTP请求或其他方式。
在前端，使用一个数据服务（如axios、fetch等）将产品信息发送到后台。当后台返回产品信息时，你可以解析这些信息，并根据需要更新你的模板。
javascript
export default {
name: 'ProductList',
data() {
return {
products: []
};
},
async mounted() {
this.$http.get('your-api-url').then(response => {
this.products = response.data;
});
},
async beforeDestroy() {
this.$http.delete('your-api-url').then(response => {
console.log('Product list cleared');
});
},
template: `<div>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }} - {{ product.price }}
</li>
</ul>
</div>`
}
注意，这只是一个基本的例子，实际的实现可能需要考虑更多的因素，如错误处理、数据验证等。
