Vue ts 无法获取到 router ? Unknown custom element: <router-view>

目录结构

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 却无法使用。

阅读 4.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题