vue 路由跳转后 怎样去掉指定的组件?


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

这是App.vue

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


<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}}">,

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

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

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


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


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


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



相关阅读:
求一个博客用的tags轮子,怎么都是laravel的。
[webstorm]webstorm如何打开.babelrc文件?
关于ajax请求
模拟草料上传二维码图片,得出识别结果
关于 浏览器 Cache-Control 不能设置问题。
transform属性在这种情况下为什么不生效啊?
怎样通过$.ajax跨域请求斗鱼TV API 取得json数据
cef3 cookie分离
标签添加成功了为什么不显示呢?
PHP水印合成中文乱码怎么解?网上教程没用
chrome下disabled的input不能选中和复制, 有解决办法吗
ps切图出现细线
canvas绘制的时钟,出现多余的黑色线条是怎么回事??
关于页面同时异步请求两个js,渲染页面等待如何优化
关于 promise 的问题:请问在这个短小函数里 then 会被执行几遍?
Vue嵌套路由失效?
php中static和abstractor有啥区别?
如何删除选中的cell中对应的行?
js弹窗验证失败
关于STUN协议中属性的一点问题



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 神奇的光斑 我的梦·中国梦征文稿:山村建筑梦 男人让女人抓狂的十个行为 党风廉政建设和反腐败斗争论述摘编学习体会 永明乐 六 两学一做关键要常学长做 宫崎骏 来看此遥夜,唯有我酌独 昆明老友作文600字 取名字作文500字 老舍的收藏 我的命运 人生=泪水作文300字 感人:这辈子的约定 老师,您别走!作文1000字 怒放的生命1200字 夜间外出上网吧检讨书 迟到的中秋节作文900字 和友诗 【精品】幼儿园教师个人工作总结 冯仑的第一桶金 我心中的李白作文800字 2016公司拓展训练心得体会 节能减排,爱护地球作文150字 《寻找时传祥》作业练习 校园年度工作总结 当真爱不再,当韶华老去。————献给七夕 关于七夕的散文 宿敌 组内互评好处多 司法局局长在社区矫正工作会议上的讲话 体育局年终工作总结 2016年街道社区工作思路 十大英语青春励志 励志不是说说而已 读书是我的乐趣作文400字 2015年孝感中考作文题目及优秀范文 黄龙五彩池作文 “如何朗诵诗歌”讲座总结 似火年华 飘散在记忆里的亲情 日记三则作文450字 小学三年级最新班级工作计划 2015县工商行政管理局长年述职述廉报告 我学习普通话的体会 美丽的水姑娘 读书伴我快乐成长250字 寒事终消歇,风光又一新 读《生的伟大死的光荣》有感作文500字 我的时间别论 请让我有尊严地生活

Copyright © 2016 phpStudy |