我正在尝试通过路由器安装Vue.js,并且遇到一些视图问题。我有一个带有子路由的router.js
。我想将此方法用于简单的面包屑并生成清晰的概述,以便我知道哪条路线属于哪里。
打开每条路线都像是一种魅力,一切都会显现出来。当我打开/apps
时,我的Apps.vue
得到了一个很好的视图,显示了App overview</h1>
。但是现在我打开/apps/app-one
,然后看到Apps.vue
和AppOne.vue
模板。如何防止两个模板都显示?
vue组件如下所示:
import Router from 'vue-router';
import AppsPage from './components/Apps.vue'
import AppOne from './components/AppOne.vue'
import AppTwo from './components/AppTwo.vue'
export default new Router({
// mode: 'history',
routes: [
{
path: '/apps',
component: AppsPage,
children: [
{
path: '/apps/app-one',
component: AppOne,
},
{
path: '/apps/app-two',
component: AppTwo,
},
]
},
]
});
<template>
<div id="app-overview">
<h1>App overview</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app_page'
}
</script>
<template>
<div>
<h1>App 1</h1>
</div>
</template>
<script>
export default {
name: 'app_one'
}
</script>
<template>
<div>
<h1>App 2</h1>
</div>
</template>
<script>
export default {
name: 'app_two'
}
</script>
答案 0 :(得分:2)
使路线具有父子关系意味着子组件将在父组件内部(在<router-view>
处呈现)。这是预期的行为。
如果您不希望在子路由处于活动状态时父组件可见,则路由应为同级,而不是嵌套:
[
{
path: '/apps',
component: AppsPage,
},
{
path: '/apps/app-one',
component: AppOne,
},
{
path: '/apps/app-two',
component: AppTwo,
},
]
路由的结构反映了它们在页面上的呈现方式。
答案 1 :(得分:0)
这也是可能并且非常容易的。您可以通过以下方法来实现:
<template>
<div>
<div v-show="isExactActive">
Parent component contents will be here
</div>
<router-view ref="rv"></router-view>
</div>
</template>
<script>
export default {
data() {
return {
isExactActive: true,
}
},
updated() {
this.isExactActive = typeof this.$refs.rv === 'undefined';
},
mounted() {
this.isExactActive = typeof this.$refs.rv === 'undefined';
}
}
</script>
希望,这会有所帮助。