Vue.js 带有导航栏和侧栏的Vue子例程

我正在尝试使用vue设置路由系统。出于我的目的，我需要一个固定的导航栏在顶部，需要显示在每一页和一个侧栏，我只想显示在设置页面。以下是我尝试过的：

const路由=[
{
路径：'/settings'，
名称：'设置'，
组件：设置，
儿童：[
{
路径：“路由1”，
名称：“路由1”，
组件：路由1
},
{
路径：'route2'，
名称：'Route2'，
组成部分：路由2
}
]
}
]

然后在设置模板上：

//我的子程序在这里

我觉得我错过了什么。首先，我不明白如何正确显示子例程。我尝试了

，但它似乎引用了父导航。 其次，我不希望用户访问

/settings

路线，而只希望用户访问

/settings/route1

和

settings/route2

我可以通过简单地在每个设置路径中添加边栏来实现这一点，但这似乎很糟糕，因为它每次都会强制安装

组件

我错在哪里？

---

谢谢

正如您可能猜到的那样，

元素进入您的

设置

组件：

<template>
  <div class="flex items-start">
    <div class="lg:w-3/12 w-12 sm:w-16 md:w-24 pb-10 lg:pr-8">
      <Sidebar />
    </div>
  </div>
  <div class="lg:w-9/12 w-full pt-10 pb-8 text-justify">
    <router-view /> <!-- Here is your router view --> 
  </div>
</template>

---

或者使用

$router.push（）。
  mounted() {
    if(this.$router.currentRoute.path.endsWith('/settings')) {
      this.$router.replace('/settings/route1')
    }
  }