現(xiàn)在需要在同一個(gè)頁(yè)面做操作加載，考慮到router沒(méi)什么必要，通過(guò)v-show來(lái)綁定。
左側(cè)是另一個(gè)組件leftbar.vue。點(diǎn)擊之后通過(guò)路由進(jìn)入另一個(gè)頁(yè)面。點(diǎn)擊左側(cè)欄沒(méi)法刷新。

右側(cè)欄code

<template>
  <div class="rightBar">
    <p class="rightBar-nav">
      <a href="#">幫助中心</a>
      <span>></span>
      <a href="#">{{ this.$route.query.name }}</a>
    </p>
    <div class="newsList-con" v-for="item in news" v-show="item.id == cate_id & !vshow" :key="item.id">
      <dl class="newsList" v-for="item in item.dataList" :key="item.id">
        <dt><a href='javascript:;' @click="showNextPage">{{ item.title }}</a></dt>
        <dd>{{ item.txt }}</dd>
      </dl>
    </div>
    <div class="newsList-child" v-show="vshow">
      sss
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  props:["vshow"],
  data () {
    return {
      news: [],
      ok: false,
      vshow: false,
      cate_id: 1
    }
  },
  mounted: function () {
    axios.get('static/data/dataBase.json')
      .then((res) => {
        console.log(res)
        this.news = res.data.dataTxt
        if (this.$route.query.id) {
          this.cate_id = this.$route.query.id
        }
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    showNextPage: function () {
      this.vshow = !this.vshow
    }
  },
  watch: {
    '$route' (to, from) {
      this.cate_id = this.$route.query.id
    }
  }
}
</script>