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协议中属性的一点问题



快速导航

Copyright © 2016 phpStudy |