如何让路由器视图在另一个组件中呈现组件？答案

【问题标题】：How do I get router-view to render components inside another component?如何让路由器视图在另一个组件中呈现组件？
【发布时间】：2018-10-31 02:46:57
【问题描述】：

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

我在App 中有另一个名为<content> 的组件。在<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> 内部没有任何渲染。我也没有收到任何错误。

【问题讨论】：

你在routes.js中忘记了export default routes
是的，这行得通。谢谢！

标签： javascript vue.js vue-component vue-router

【解决方案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 也有帮助。

【讨论】：

【解决方案2】：

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

【讨论】：