Vue js - 路由和条件渲染答案

【问题标题】：Vue js - Routing and Conditional RenderingVue js - 路由和条件渲染
【发布时间】：2021-11-14 06:21:15
【问题描述】：

您好，我对 VueJS 比较陌生，在使用 Cue Router 时对条件渲染有疑问。

我的路线设置如下：

const routes = [
  {
    path: '/',
    component: () => import('layouts/Layout.vue'),
    children: [
      { path: '/info', component: () => import('pages/Info.vue') },
      { path: '/order', component: () => import('pages/Order.vue') },
      { path: '/setup', component: () => import('pages/Mapping')}
    ]
  }
]

布局基本上只针对左侧的Header和NavBar。

现在我希望能够通过在布局中使用v-if 有条件地渲染它们来将标题和导航栏更改为从设置页面不可见。而且我不知道如何从 Setup.vue 访问 Layout.vue。

这可能是一个愚蠢的问题，但我没有找到解决方案。

感谢您的宝贵时间 :)

【问题讨论】：

如果你想让一个路由没有父路由可见......最好将路由作为父路由的兄弟。
好的，谢谢，但是我如何将这些组件渲染在一起呢？你能为我做一个示例代码吗？
嘿@VenkateshA 我已经尝试过将路线作为兄弟姐妹，但它确实成功了。出于某种原因，我什至无法手动打开页面并到达那里错误：无法获取/映射。你能帮帮我吗？
这些是我使用的路由：``` const routes = [ { path: '/', component: () => import('layouts/Layout.vue'), children: [ {路径：'/info'，组件：（）=> import（'pages/Info.vue'）}，{路径：'/order'，组件：（）=> import（'pages/Order.vue'）} , { path: '/setup', component: () => import('pages/SetupMap.vue')} ] }, { path:'/mapping', component: () => import('pages/Mapping. vue') } ] ```
那么pblm就是在某个子路由的父组件中隐藏几个section是吗？

标签： vue.js routes conditional-rendering

【解决方案1】：

要在组件中查找当前路由，请尝试使用对象“$route”。它将具有所有参数、查询、路由路径、重定向自等。这样您就可以在组件逻辑中使用 v-if

【讨论】：

我已经到了可以通过调用“this.$route.matched[0].components”来获取（布局）组件的地步，但后来我卡住了，因为我无法调用“数据” ()´ 从这个组件访问我的变量

【解决方案2】：

正如预期的那样，解决方案有点微不足道：

添加了兄弟路由，但是因为我使用Quasar预定义的组件，我忘记了q-layout和q-page-container标签，所以无法加载页面内容。

【讨论】：