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);
}
}
}