路由器视图内容未呈现

Posted 2023-02-22

【中文标题】路由器视图内容未呈现

【英文标题】：router-view content not rendering

【发布时间】：2017-11-09 21:23:04

【问题描述】：

我的应用程序的router-view 内容始终为空 (<!---->)，即使路由本身运行良好并且模板在整个应用程序中正确呈现。

（注意：虽然只有import Vue from 'vue';，但我使用的是带有编译支持的独立版本的Vue.js。正确的导入被webpack替换。）

main.ts

import Vue from 'vue';
import Router from './services/router';
import  AppComponent  from './components/';

export default new Vue(
  el: '#app-container',
  router: Router,
  render: (context) => context(AppComponent)
);

main.template.pug（摘录）

body
  #app-container

app.ts（摘录）

@Component(
  template: require('./app.template.pug'),
  components: 
    'app-header': HeaderComponent,
    ...
  
)
export class AppComponent extends Vue 

app.template.pug

.app
  app-header
  .app-body
    app-sidebar
    main.app-content
      app-breadcrumb(:list='list')
      .container-fluid
        router-view
    app-aside
  app-footer

services/router/index.ts（摘录）

import Router from 'vue-router';
import  DashboardComponent  from '../../components/pages/dashboard';

Vue.use(Router);

export default new Router(
  mode: 'history',
  linkActiveClass: 'open active',
  routes: [
    
      path: '/',
      redirect: '/dashboard',
      name: 'Home',
      children: [
        
          path: 'dashboard',
          name: 'Dashboard',
          component: DashboardComponent
        
      ]
    
  ]
);

【参考方案1】：

好吧，我自己想通了。似乎vue-router 中的每个路由定义都需要一个组件。所以它正确地路由到了DashboardComponent，但没有任何东西可以在它的父节点上渲染。我为父级提供了一个简单的虚拟组件，它的模板只有一个 router-view，它开始工作了。

【参考方案2】：

是的.. Home 路由没有组件... 你可以这样做：

routes: [
    
      path: '/',
      redirect: '/dashboard',
      name: 'Home',
      component: 
          template: '<router-view/>',
      ,
      children: [
        
          path: 'dashboard',
          name: 'Dashboard',
          component: DashboardComponent
        
      ]
    
  ]

【讨论】：

即使我自己想通了，我也会接受这个答案。我不知道您还可以在路由器配置中声明模板，因此这是对答案的一个很好的补充。 :)

你只需要记住安装运行时编译器。如果不想使用，需要创建一个只有router-view的组件。

【参考方案3】：

其他方式 - 只需将模板添加到父级

 const router = new VueRouter(
    routes: [ path: "/", component: YourComponent ],
);

new Vue(
    router,
    template: '<router-view/>',
).$mount("#mounting");