Vue中的路由组件

在做项目的时候，需要写一个导航栏，有的页面是不需要的，比如404页面，这个时候就可以把路由模块抽出来做一个组件，十分方便，分为两种情况 局部注册 局部应用 ，每个页面应用的时候，需要单独注册单独引入，第二：全局注册 ，随时引入。

<div>
        <router-view/>
        <hr>
        <div>
            <router-link to="/money">记账</router-link>
            <router-link to="/labels">标签</router-link>
            <router-link to="/statistics">统计</router-link>
        </div>
    </div>

抽出来作为公共组件 Nav 路由组件

<template>
    <div>
        <router-link to="/money">记账</router-link>
        <router-link to="/labels">标签</router-link>
        <router-link to="/statistics">统计</router-link>
    </div>
</template>

<script lang="ts">
  export default {
    name: 'Nav'
  };
</script>

<style scoped lang="scss">

</style>

三个页面用的时候，随时随地的调用即可 :Label.Vue组件 调用这个路由组件库

<template>
    <div>
        Label.Vue
        <Nav/>   //调用组件 
    </div>
</template>

<script lang="ts">
  import Nav from '@/components/Nav.vue'; // 引入组件

  export default {
    name: 'Labels',
    components: { Nav } //注入组件
  };
</script>

<style scoped lang="scss">

</style>

还有一种方法 全局应用 在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组件 调用这个路由组件库

<template>
    <div>
        Label.Vue
        <Nav/>   //全局注册过了 随时引用这个公共组件
    </div>
</template>

<script lang="ts">

  export default {
    name: 'Labels',

  };
</script>

<style scoped lang="scss">

</style>