使用 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 的子项并设置它们的路径。

在我的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 的目的是什么？如果您将这个用于子路径作为参数，这是一个问题。这就是为什么您的子组件未呈现的原因。因为， :view 用于动态路由。 /dashboard/:view 等同于 /dashboard/* ，表示 /dashboard 之后可以有任意路由，该路由会渲染 Dashboard 组件。您的子路径 /dashboard/products 和 /dashboard/settings 将始终匹配 /dashboard/:view 并呈现父组件-Dashboard。因此，在您的情况下，子组件的路由是已知的。所以你不需要使用 :view。更多，https://router.vuejs.org/en/essentials/dynamic-matching.html.

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

Issue rendering child views in Vue with Vue Router

vue.js

vue-router