在做項目的時候椭迎，需要寫一個導(dǎo)航欄彰阴，有的頁面是不需要的瘾敢，比如404頁面，這個時候就可以把路由模塊抽出來做一個組件尿这，十分方便廉丽，分為兩種情況 局部注冊 局部應(yīng)用 ，每個頁面應(yīng)用的時候妻味，需要單獨注冊單獨引入正压，第二：全局注冊 ，隨時引入责球。
<div>
<router-view/>
<hr>
<div>
<router-link to="/money">記賬</router-link>
<router-link to="/labels">標簽</router-link>
<router-link to="/statistics">統(tǒng)計</router-link>
</div>
</div>
抽出來作為公共組件 Nav 路由組件
<template>
<div>
<router-link to="/money">記賬</router-link>
<router-link to="/labels">標簽</router-link>
<router-link to="/statistics">統(tǒng)計</router-link>
</div>
</template>
<script lang="ts">
export default {
name: 'Nav'
};
</script>
<style scoped lang="scss">
</style>
三個頁面用的時候焦履，隨時隨地的調(diào)用即可 :Label.Vue組件 調(diào)用這個路由組件庫
<template>
<div>
Label.Vue
<Nav/> //調(diào)用組件
</div>
</template>
<script lang="ts">
import Nav from '@/components/Nav.vue'; // 引入組件
export default {
name: 'Labels',
components: { Nav } //注入組件
};
</script>
<style scoped lang="scss">
</style>
還有一種方法 全局應(yīng)用 在main.js 中
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import Nav from '@/components/Nav.vue'; //引入路由組件
Vue.config.productionTip = false
Vue.component('Nav',Nav) // 全局注冊組件
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
:Label.Vue組件 調(diào)用這個路由組件庫
<template>
<div>
Label.Vue
<Nav/> //全局注冊過了 隨時引用這個公共組件
</div>
</template>
<script lang="ts">
export default {
name: 'Labels',
};
</script>
<style scoped lang="scss">
</style>
最后編輯于 ：2020.04.16 17:41:33
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
