可以断点可以进入mounted,就是不知道为什么不显示vue-router的内容,输入路由可以跳转页面并执行script,但是template的内容不显示
补充一下,<router-view>标签没有被识别
App.vue
<template>
<div>
<v-header :app-title="title" />
<router-view />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import vHeader from './components/Header.vue';
import { title } from './config';
@Component({
components: { vHeader }
})
export default class App extends Vue {
title = title;
}
</script>
<style lang="scss" scoped>
div {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
test.vue
<template>
<div>111</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
mounted() {
alert(1);
}
})
export default class testPage extends Vue {}
</script>
路由
let test: any = () => import('./test.vue').then(m => m.default);
let covidMap: any = () => import('./covidMap.vue').then(m => m.default);
export default [
{
path: '/covidMap',
meta: {
title: '疫情地图'
},
component: covidMap
},
{
path: '/test',
meta: {
title: '测试'
},
component: test
}
];
总的路由代码
import covidRoute from './views/covid/route'; //导入路由文件
let routes: any = [
{
path: '/'
}
];
// 合并路由
routes = new Set([...routes, ...covidRoute]);
export default routes;
main.ts
import Vue from 'vue';
// import 'babel-polyfill';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import Vuex from 'vuex';
Vue.use(VueRouter);
Vue.use(Vuex);
const router: any = new VueRouter({
mode: 'history',
routes
});
router.beforeEach((to: any, from: any, next: any) => {
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
export default {};
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…