Vue js - 路由和条件渲染

Posted 2023-02-22

【中文标题】Vue js - 路由和条件渲染

【英文标题】：Vue js - Routing and Conditional Rendering

【发布时间】：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是吗？

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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

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