javascript - vue 路由跳转后 怎样去掉指定的组件？

Question

是这样的，我要做一个话题列表，点击某个话题跳到 帖子详情页。
问题是:
1.这个话题列表页有3个公用的组件；top ,banner,bottom;我用路由跳转到帖子详情怎样让banner这个组件不显示？
请各位大神给点提示，刚用Vue,好不容易才搭好环境。。。贴上代码， 用的是VUE2。。。

这是App.vue

    <p id="app">
            <top></top>
            <banner></banner>
            <router-view keep-alive></router-view>
            <bottom></bottom>
  </p>


<script>
    import top from './component/top.vue'
    import banner from './component/banner.vue' // 调到帖子详情后，不让这个组件出现
    import bottom from './component/footer.vue'
    export default {
        name: 'app',
        components: {
            top: top,
            banner: banner,
            bottom: bottom
        }
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'
//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);
Vue.use(VueResource);
//定义组件

import home from './view/home.vue';
import bangbang from './view/bangbang.vue';
import about from './view/about.vue';
import join from './view/join.vue';
import contact from './view/contact.vue';
//创建一个路由 实例
// 并 配置 路由规则
const router = new VueRouter({
    mode: 'history',
    base: __dirname, //获取当前路径下的完整路径
    routes: [{
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: home
        },
        {
            path: "/bangbang",
            component: bangbang,
        },
        {
            path: '/about',
            component: about
        },
        {
            path: '/join',
            component: join
        },
        {
            path: '/contact',
            component: contact
        }

    ]
});


//启动路由
//路由会创建一个App 实例 并 挂载到 #app 对应在 元素上
const app = new Vue({
    router: router,
    render: h => h(App)
}).$mount('#app');

 这是跳到帖子详情的 

<router-link :to="{path:'bangbang',query: {id:topicItem.id}}">,

我也查了很久，说是用嵌套路由还有什么多个视图什么的， 也没弄清楚， 谢谢大家了。。。

Answer 1

<banner v-if="$route.path!=='/bangbang'"></banner>

你的<router-link :to="{path:'banbang',query: {id:topicItem.id}}">里的写的banbang是不是少了个g?...

Answer 2

我觉得你可以在routes里的每一项写一个beforeEnter，或者页面的components加上mounted钩子，然后在里面发个消息通知你的app，告诉ta，top、bottom、banner要不要显示；或者在app里watch那个$route，判断当前在什么页面那些需要显示，统一处理

Answer 3

嵌套路由,RTFMhttp://router.vuejs.org/zh-cn...

Answer 4

建议用vuex来进行状态管理，每个组件设置相应的状态