vue.js的router导航条

问题描述

问 题

开始是这样的,navhead组件里有3个v-link,对应3个router-view
其中第一个v-link是首页,另2个是其它页面
我想问的就是在首页时,navhead里其它2个v-link不显示,在其它2个页面时,3个v-link全显示,应该怎么写..

我觉得思路上就是给这2个v-link再写个v-if,navhead组件的data开始是false,在首页中点击后,把navhead的false改成true..但首页是另一个组件,不知道两个组件中的data互相影响怎么写?

解决方案

你这个需求虽然有点怪(我比较土)，但我们还是老老实实给出一个最简单的解决方案，

首先我假设你图中的组件叫Parent吧，我们先来设计她：

<template>
    <navhead :isHome="isHome"></navhead>
    <router-view keep-alive transition-mode="out-in"></router-view>
</template>
<script>
    export default {
        computed: {
            isHome: function(){
                //判断是否是首页
                return this.$route.path === '/home';
            }
        }
    };
</script>

然后你只要在navhead里爽快的使用isHome属性就好了：

<template>
     <a v-link="{ path: '/home' }" >Go to HOME</a>
     <a v-link="{ path: '/aaa' }" v-if="!isHome">Go to aaa</a>
     <a v-link="{ path: '/bbb' }" v-if="!isHome">Go to bbb</a>
</template>
<script>
    export default {
        props: {
            isHome: {
                type: Boolean,
                default: false
            }
        }
    };
</script>

这篇关于vue.js的router导航条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！