IT이야기

라우터 뷰 콘텐츠가 렌더링되지 않음

cyworld 2022. 6. 4. 08:13
반응형

라우터 뷰 콘텐츠가 렌더링되지 않음

router-view내 앱의 콘텐츠는 항상 비어 있습니다(<!---->라우팅 자체는 완벽하게 작동하고 템플릿은 앱 전체에서 올바르게 렌더링됩니다.

(주: 단,import Vue from 'vue';컴파일을 지원하는 스탠드아론 버전의 Vue.js를 사용하고 있습니다.올바른 Import는 webpack으로 대체됩니다.)

메인

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.disc.pug (삭제)

body
  #app-container

app.ts (해당)

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

}

app.discloss.퍼그

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

services/sys/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
        }
      ]
    }
  ]
});

좋아, 내가 직접 알아냈어.모든 루트의 정의에서는,vue-router에는 컴포넌트가 필요합니다.즉, 에 올바르게 라우팅 됩니다.DashboardComponent부모에게 렌더링할 것이 없었습니다.부모에게 간단한 더미 컴포넌트를 제공했는데router-view템플릿이 되고 작동하기 시작했기 때문입니다.

네, 귀경로는 구성 요소가 없습니다간단하게 할 수 있는 것은, 다음과 같습니다.

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

다른 방법 - 상위 항목에 템플릿을 추가합니다.

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

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

언급URL : https://stackoverflow.com/questions/44431015/router-view-content-not-rendering

반응형