目录结构
app.vue // 入口 (在这里可以使用 router-view)
index.ts
router.ts // 路由配置
- page1.vue // 页面1 (在这里无法使用 router-view)
- page2.vue // 页面1的 子页面 (在这里无法使用 router-view)
index.ts
'use strict'
import Vue from 'vue'
import App from '@browser/ui/app.vue'
import router from '@/browser/lib/router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router.ts
import Vue, { AsyncComponent as Async } from 'vue'
import Router from 'vue-router'
const Page1: Async = (): any => import('@browser/ui/page1.vue')
const Page2: Async = (): any => import('@browser/ui/page2.vue')
Vue.use(Router)
export default new Router({
mode: 'hash',
base: '/',
routes: [
{
path: '/page1',
name: 'page1',
component: Page1,
children: [
{
path: '/page2',
name: 'page2',
component: Page2
}
]
}
]
})
app.vue
<template>
<div id="app">
<div class="app-arrow"></div>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default class extends Vue {}
</script>
page1
<template>
<div>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Component
export default class Page2 extends Vue {
}
</script>
问题
Page1 在 app.vue 下,app.vue 中有 router-view 它是可以使用的,但是在 page1 中提示 router-view 未注册,并且在 Vue 对象上也没有 $router $route ?
非常奇怪的问题,因为如果路由注册失败了,那么 app.vue 的路由不应该可用,但是它确实可用,并在页面成功显示了 page1 的内容,但是 page1 下的 router-view 却无法使用。