Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
411 views
in Technique[技术] by (71.8m points)

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

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 {};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...