directory structure
app.vue // router-view
index.ts
router.ts //
- page1.vue // 1 router-view
- page2.vue // 1 router-viewindex.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("-sharpapp")
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>question
Page1 is available under app.vue and router-view in app.vue, but it is indicated in page1 that router-view is not registered and there is no $router $route?
on the Vue object.is a very strange problem, because if route registration fails, then the route for app.vue should not be available, but it does, and the content of page1 is successfully displayed on the page, but router-view under page1 is not available.