使用Vue路由器有条件地显示视图

r9f1avp5 于 2022-11-30 发布在 Vue.js

关注(0)|答案(1)|浏览(168)

因此，我试图实现一个布局与可选侧栏的基础上vue路线
目前我有以下内容：
1.一个App.vue，它有一个MainLayout组件，组件上有放置路由器视图的插槽

<main-layout>
    <template #main>
        <router-view/>
    </template>
    <template #sidebar>
        <router-view name="LeftSidebar"/>
    </template>
    <template #rightsidebar>
        <router-view name="RightSidebar"/>
    </template>
</main-layout>

1.路由器看起来像这样：

const routes = [
  {
    path: "/lectures",
    components: {
      default: LectureList,
      LeftSidebar: MainMenu,
    }
  },
  {
    path: "/users",
    components: {
      default: UserList,
      LeftSidebar: MainMenu,
      RightSidebar: SomeOtherComponent
    }
  },
]

MainLayout.vue看起来像这样（简化）

<div>
    <div class="left-sidebar">
        <slot name="sidebar"/>
    </div>
    <div class="main">
        <slot/>
    </div>
    <div class="right-sidebar">
        <slot name="rightsidebar"/>
    </div>
</div>

目前主菜单布局有一个rightsidebar的插槽，我希望它只有在有一些内容的情况下才能呈现，即如果一些路由为RightSidebar路由器视图提供了一个组件。我尝试在MainLayout中查看slots，并在.right-sidebar div上添加一个v-if，以仅显示rightsidebar插槽是否存在，但我猜它不起作用，因为其中已经存在router-view
处理这类案件有何建议？

vue.js

来源：https://stackoverflow.com/questions/74601667/conditionally-show-view-using-vue-router

1条答案

按热度按时间

bf1o4zei1#

使用名为views的Vue路由器的matched属性，我们可以检查哪些属性已经通过。
在这里的代码中，我添加了一个监视器，它将检查每条路径是否传递了侧边栏视图的属性，并将更新数据属性以用作条件。

<main-layout>
   <template #main>
      <router-view/>
   </template>
   <template #sidebar v-if="isLeftSideBar">
      <router-view name="LeftSidebar"/>
   </template>
   <template #rightsidebar v-if="isRightSideBar">
      <router-view name="RightSidebar"/>
   </template>
</main-layout>

<script >
export default {
    name: "App",
    data() {
        return {
            isLeftSideBar: false,
            isRightSideBar: false
        }
    },
    watch: {
        $route(to, from) {
            if (to.matched.length) {
                this.isLeftSideBar = to.matched[0].props.hasOwnProperty("LeftSidebar");
                this.isRightSideBar = to.matched[0].props.hasOwnProperty("RightSidebar");;
            }
        }
    },
} 
      
</script>

如果这有用的话请告诉我。

赞(0）回复(0）举报 2022-11-30

我来回答

使用Vue路由器有条件地显示视图

1条答案

相关问题

热门标签

最新问答