如何让router-view在另一个组件中呈现组件？

Question

我看到的大多数示例都在主<router-view>组件中设置了App.vue但我的不是这样。

我在<content>中有另一个名为App的组件。在<content>内，我有其他各种组件，例如<skills>，<projects>等。

现在，我使用v-show切换每一个，但现在，我想使用路线。

这是我App.vue

的模板

  <div id="app">
    <img id="photo" src="../public/assets/IMG_3187.jpg">
    <Content msg="Divyanth Jayaraj"/>
    <site-footer></site-footer>
  </div>

在Content.vue内，模板看起来像这样。 请注意评论标记。

<div class="content">
    <h1>{{ msg }}</h1>
    <p>
      UI/UX Consultant
    </p>
    <navbar @select='navigate($event)'></navbar>
    <router-view></router-view>
    <!-- <intro v-show='this.navSelect == "Introduction"'></intro>
    <skills v-show='this.navSelect == "Skills"'></skills>
    <education v-show='this.navSelect == "Education"'></education>
    <projects v-show='this.navSelect == "Projects"'></projects>
    <faq v-show='this.navSelect == "FAQ"'></faq> -->
  </div>

<router-view>应该呈现我的每个组件但不是。仅供参考，我在之后设置了vue-router 。我构建了大部分项目。

仅供参考，以下是我设置路由器的方法。

这是routes.js

import Introduction from './components/introduction/introduction'
import Skills from './components/skills/skills'
import Projects from './components/projects/projects'
import Education from './components/education/education'
import FAQ from './components/FAQ/faq'

const routes = [
  { path: '/', redirect: '/Introduction'},
  { path: '/Introduction', name: 'Introduction', component: Introduction},
  { path: '/Skills', name: 'Skills', component: Skills},
  { path: '/Projects', name: 'Projects', component: Projects},
  { path: '/Education', name: 'Education', component: Education},
  { path: '/FAQ', name: 'FAQ', component: FAQ}
]

这是main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes.js'



Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
  routes: Routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这是我的App.vue，但这可能不相关

import Content from './components/content.vue'
import Footer from './components/site-footer.vue'
export default {
  name: 'app',
  components: {
    Content,
    'site-footer' : Footer
  }
}

我做错了什么？现在，<router-view>内没有任何渲染。我也没有收到任何错误。

Answer 1

您可以使用嵌套路线。我没有测试你的代码。但是我想如果你改变了这样的代码就行了。

const routes = [
  { path: "/", redirect: "/Introduction" },
  { path: "/contents", components: Content,
   children: [
    { path: "/Introduction", name: "Introduction", component: Introduction },
    { path: "/Skills", name: "Skills", component: Skills },
    { path: "/Projects", name: "Projects", component: Projects },
    { path: "/Education", name: "Education", component: Education },
    { path: "/FAQ", name: "FAQ", component: FAQ }
   ]
 }
];

并将<router-view>添加到App.vue组件。

我认为official documentation也应该更有帮助。

Answer 2

提到sovalina，在export default routes中添加routes.js解决了我的问题。