vue-router 动态路由 嵌套动态路由 监听 $route发生冲突

这是我的route

routes: [
    {
      path: '/',
      name: 'Login',
      component: () => import('@/page/login/Login'),
    },
	routes: [
    {
      path: '/',
      name: 'Login',
      component: () => import('@/page/login/Login'),
    },
		 {
		  path:'/Home',
		  name:'Home',
		  redirect: {name: 'news'},
		  component: () => import('@/page/main/Home'),
		  children:[
		    {
		      path: 'orb/:id',
		      name: 'orb',
		      component: () => import('@/page/orb/orb'),
		      children:[
		        {
		          path: 'wiki',
		          name: 'wiki',
		          component: () => import('@/page/orb/wiki'),
		        },
		        {
		          path: 'strategy',
		          name: 'strategy',
		          component: () => import('@/page/orb/strategy'),
		        },
		        {
		          path: 'article/:id',
		          name: 'article',
		          component: () => import('@/page/orb/article'),
		        },
		
		      ]
		    },
		    {
		      path:'news',
		      name:'news',
		      component: () => import('@/page/news/news'),
		    },
		  ]
		},

home 下有个 orb/：id 动态匹配 orb下有article/:id 动态匹配

为了让orb下的内容在切换的时候 动态展示 官网的方法是 watch $route

 watch:{
        $route:'init'
      },

这是我的 orb.vue

<template>
  <div class="orb">
    <div class="orbLeftList">
      <div class="orbWikiAndActivity">
        <div class="waItem"></div>
        <div  class="orbWikiAndActivityItem" v-bind:class="{clicked:item.selected}" v-for="item in articleSections" :key="item.id" @click="upSelected(item)">{{item.name}}</div>
      </div>
      <div class="fenGeXian"></div>
      <el-button @click="downSelected">下点击</el-button>
      <el-button @click="cancelSelected">取消选中状态</el-button>
    </div>
    <div class="orbRightBack">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import {FindOrbArticleSections} from '@/api/orb'
    export default {
      name: "orb",
      data() {
        return {
          has_wiki: false,
          has_strategy : false,
          orbId:0,
          defaultSelected:'has_wiki',
          articleSections:[],
        }
      },
      watch:{
        $route:'init'
      },
        methods: {
        init(){
          console.info('this.$route.query.id', id)

          let id =  this.$route.query.id....

这是我的 article.vue

<template>
  <div>article
  <div>{{orbId}}</div>
  </div>
</template>

<script>
    export default {
      name: "article",
      data() {
        return {
          orbId: 0
        }
      },
      watch: {
        $route: 'initData'
      },
      created(){
       this.initData()
      },
      methods: {
        initData(){
          this.orbId =this.$route.params.id
        }

      },
    }
</script>

orb init() 中对 route 跳转来的参数 获取去后台取得数据 在点击一个 article时 动态匹配改变了路由 覆盖了原先 home跳转到 orb的参数 导致 orb list部分的数据获取失败

如何做 这种动态路由 嵌套动态路由的 数据初 始化呢？