组件之间传参及获取动态参数（导航路由）

父级向子级动态传参

导航栏

<li v-for="(NVchildlist,cindex) in NVlist.childList" :key="cindex">
  <router-link
        :to="{
         path: NVchildlist.url,
         query: {mdl: NVchildlist.model,catid: NVchildlist.catid}
        }">{{NVchildlist.catname}}
  </router-link>
</li>

父组件

<cat-top :mdl="mdl"></cat-top>  //组件音乐

import catTop from './common/catTop'
export default {
  name: "page",
  components: {catTop},
  data(){
   return{
      mdl: String
   }
  },
  created: function() {
     this.mdl = this.$route.query.mdl //获取路由参数
  },
}
子组件

<div class="catTop_box">
{{mdl}}
 </div>

export default {
  name: "catTop",
  props: ['mdl'],
  data(){
   return {

   }
  }
}

Tip:需要注意（如果路径不变，只是参数变，里面的组件不会重新渲染）
解决办法

created: function() {
 this.model = this.$route.query.model
 this.catid = this.$route.query.catid
},
//注意这里 监听路由事件
watch:{
 $route(){
  this.model = this.$route.query.model
  this.catid = this.$route.query.catid
 },
}