Vue之watch路由跳转

可能应用的场景：比如我当前是个介绍新闻资讯的页面，它的子路由是点击某条新闻跳转到的详情组件，实现思路倒很简单：

主路由的新闻列表写在一个div里，并给该div一个v-if=”news”，当监测到路由处于新闻资讯的主路由就让news等于true，即显示。如果不在主路由（比如跳转去子路由详情页面）则为false，如下：
router.js：

{
      path: '/new',
      name: 'new',
      component: news,
      children: [
        {
          path: '/new/newDetail',
          name: 'newDetail',
          component: newsDetail
        }
      ]
    }

新闻资讯主路由的组件template：

<template>
  <div class="wrapper">
    <div class="news" v-if="news">
        这里是新闻列表
    </div>
    <router-view></router-view> <-- 这个容器是显示跳转后的详情组件 -->
  </div>
</template>

监控路由的js如下：

export default {
  created () {// 每次路由变化dom重新加载都会执行该方法
    this.historyWatch();
  },
  watch: {
      // 路由若是发生变化，会再次执行该方法
      '$route': 'historyWatch';
    },
    methods: {
      historyWatch () {
        this.news = (this.$route.path === '/new' ? 1 : 0);
      }
    }
}