vueJs需要在同一个页面做操作加载，通过v-show绑定问题。

Question

现在需要在同一个页面做操作加载，考虑到router没什么必要，通过v-show来绑定。
左侧是另一个组件leftbar.vue。点击之后通过路由进入另一个页面。点击左侧栏没法刷新。

右侧栏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>

Answer 1

使用v-if试试

Answer 2

v-show当页面进来时就渲染了 只不过是用css display：none属性隐藏掉了，当然不会刷新了。
建议你去看看 v-if和v-show的区别

Answer 3

你的props和data里都定义vshow了，浏览器没警告么