The router-view
content of my app always remains empty (<!---->
) even though routing itself works perfectly and templates are correctly rendered throughout the app.
(Note: Even though there's just a import Vue from 'vue';
, I'm using the standalone version of Vue.js with compilation support. The correct import is replaced by 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 (excerpt)
body
#app-container
app.ts (excerpt)
@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 (excerpt)
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
}
]
}
]
});
via null null
No comments:
Post a Comment