使用 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。