반응형
라우터 뷰 콘텐츠가 렌더링되지 않음
그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
반응형
'IT이야기' 카테고리의 다른 글
문자열에 출력 스트림 가져오기 (0) | 2022.06.04 |
---|---|
Safari용 vue-devtools 확장이 있습니까? (0) | 2022.06.04 |
null 포인터와 void 포인터의 차이점은 무엇입니까? (0) | 2022.06.04 |
GCC가 비지 대기 루프를 최적화하지 않도록 하려면 어떻게 해야 합니까? (0) | 2022.06.04 |
Jest에서 VueJ(Nuxt) 스토어를 테스트하는 방법 (0) | 2022.06.04 |