ts的vue项目里面router-view内容不显示
可以断点可以进入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 {};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
破案了,配置文件被别人动了没有走main.ts
你都说router-view标签没被识别到,这个提示报错的话,内容肯定出不来的。之前我到是因为把标签名写错了到是内容不出来,不过你的这个看代码确实没看到明确问题所在