ts的vue项目里面router-view内容不显示

发布于 2022-09-12 03:22:08 字数 2488 浏览 29 评论 0

image.png
image.png
可以断点可以进入mounted,就是不知道为什么不显示vue-router的内容,输入路由可以跳转页面并执行script,但是template的内容不显示
image.png
补充一下,<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

揪着可爱 2022-09-19 03:22:08

破案了,配置文件被别人动了没有走main.ts

青春有你 2022-09-19 03:22:08

你都说router-view标签没被识别到,这个提示报错的话,内容肯定出不来的。之前我到是因为把标签名写错了到是内容不出来,不过你的这个看代码确实没看到明确问题所在

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文