javascript - vue 路由跳转后怎样去掉指定的组件？-PHP中文网问答

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

这是App.vue

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

 这是跳到帖子详情的 

,

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

全部回复(3)

大家讲道理2017-04-11 08:58:52 3楼

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

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

赞 +0

添加回复

PHP中文网2017-04-11 08:58:52 2楼

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

PHP中文网2017-04-11 08:58:52 1楼

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