极客观点
项目管理
HarmonyOS
引入了mint的header和footer，header正常显示，footer显示不出来
main.js
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import Header from './components/header/header';
import Footer from './components/footer/footer';
Vue.use(VueRouter);
Vue.component('my-component',{
template:'<div>a custom component</div>'
});
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes:[
{
path :'/',
component:Header
},
{
path:'/',
component:Footer
}
]
});
/* eslint-disable no-new */
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app');
header.vue
<template>
<div>
<mt-header fixed title="固定在顶部"></mt-header>
</div>
</template>
<script>
import Vue from 'vue'
import 'mint-ui/lib/header/style.css'
import {Header} from 'mint-ui';
Vue.component(Header.name,Header);
export default{
}
</script>
<style>
</style>
footer.vue
<template>
<div>
<mt-header fixed title="固定在顶部"></mt-header>
</div>
</template>
<script>
import Vue from 'vue'
import 'mint-ui/lib/tabbar/style.css'
import {Header} from 'mint-ui';
Vue.component(Header.name,Header);
export default{
}
</script>
<style>
</style>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-project</title>
<!-- <meta name="viewport" content="width=device-width;initial-scale=1.0;maxinum-scale=1;user-scaleable=no;"> -->
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div>
<router-link to="header"></router-link>
<router-link to="footer"></router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
你定义的路由有问题。在根目录的路由上你对应渲染了两个组件：
他们会再App.vue文件中的router-view中渲染出来，建议去看下vue-router的文档。
这儿也是跳转过去也是空的，你没有在对应的路由上配置这两个路径，
你可以
这样你在访问 /header 和 footer 的时候就会有相应的组件渲染出来。
当然，你这个是公共组件，想来也不会在路由上去渲染