使用Vue Router在Vue中发出渲染子视图

Question

我无法在Vue中渲染我的子视图。

我的main.js文件看起来像这样

import DashboardProducts from './components/Dashboard/DashboardProducts'
import DashboardSettings from './components/Dashboard/DashboardSettings'


Vue.use(VueRouter)
Vue.use(Vuex)

const routes = [
  { path: '/activate', component: Activate },
  { path: '/dashboard/:view', component: Dashboard, 
    children: [ 
      { path: 'products', component: DashboardProducts },
      { path: 'settings', component: DashboardSettings }
    ]
  },
  { path: '/login', component: Login },
  { path: '/account', component: UserAccount }
];

const router = new VueRouter({
  routes // short for routes: routes
});

export default router;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

如您所见，我已导入组件并且没有错误。我还将它们添加为仪表板的子项并设置它们的路径。

在我的Dashboard.vue视图中，我这样做

<template>
    <div>
        <dashboard-nav></dashboard-nav>

        <!-- Will display product and settings components -->
        <router-view></router-view>
    </div>
</template>

<script>
import DashboardNav from '../components/Dashboard/DashboardNav'

export default {
    name: 'Dashboard',
    components: {
        DashboardNav
    }
};

</script>

<style>

</style>

网址匹配但没有组件正在呈现。我错过了什么？

这是一个JSFiddle，几乎是我要用的https://jsfiddle.net/dtac5m11/

它似乎在那里工作正常，但我也在我的应用程序中使用单个文件组件，所以它可能会有所不同？

同样，问题是让子组件在路由匹配时进行渲染。目前尚未安装任何组件。

更新：

我要渲染DashboardProducts组件，但无法渲染DashboardSettings。

谢谢！

Answer 1

{ path: '/dashboard/:view', component: Dashboard,

首先，您为了什么目的添加：在仪表板路径后查看？如果您将这个用于子路径作为参数，这是一个问题。这就是为什么你的子组件没有渲染的原因。因为，：view用于动态路由。 / dashboard /：view等同于/ dashboard / *，这意味着在/ dashboard之后可以有任何路由，此路由将呈现Dashboard组件。您的子路径/仪表板/产品和/仪表板/设置将始终匹配/仪表板/：查看和呈现父组件 - 仪表板。 因此，在您的情况下，您的儿童组件路线是已知的。所以你不需要使用：view。 更多，https://router.vuejs.org/en/essentials/dynamic-matching.html。