vue单页面应用中如何根据后台传过来的不同数据去渲染一个固定样式的组件？

Question

本人刚学完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中也不行？求大神指导这个如何实现的思路~~谢谢

Answer 1

两种方式都行

1. 使用beforeRouteUpdate

   beforeRouteUpdate (to, from, next) {
     console.log(this.id = to.params.id)
     next()// 记得调用下next
   }

2. 使用watch$route

   watch: {
     '$route' (newVal, oldVal) {
       console.log(newVal)
     }
   }

3. 还有一种比较“骚”的方法

   // 父组件
   <router-view :id="id">
   // 子组件内定义props:['id'],
   计算属性依赖id或watch：id做操作。

推荐你用方法1或方法2，但是方法1和方法2第一次的数据都要在created里拿。