vue之组件的使用（router-view和components）&vue组件的复用&vue顶部导航栏实例

router-view的使用方法：

在vue里面是使用<router-link to="/" >来跳转路由的

1.在需要使用跳转的组件里，使用<router-link to="/" >

如：下图1

2.在需要使用跳转的组件里，使用 <router-view></router-view>

这样的话，路由匹配到的组件将渲染显示在这里

如：下图2

3.在index.js里面设置路由：

需要导入import然后写路由参数path，name，component等

如下图：

===============================================================================

components的使用方法：

1.新建组件TopNav.vue

<template>
    <div class="TopNav">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/music">音乐</router-link>
            <router-link to="/itemBank">题库</router-link>
            <router-link to="/news">图片</router-link>
            <router-link to="/about">个人中心</router-link>
            <router-link to="login">登录</router-link>
        </div>
        <!--    路由出口-->
        <!--    路由匹配到的组件将渲染显示在这里-->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'TopNav',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .nav a {
        color: #42b983;
        margin: 0 10px;
    }
</style>

2.想在哪里复用就操作哪个文件，我这里是在App.vue里面复用这个组件：

关键步骤：

在script里面import

然后设置components

然后在template里面使用要复用的这个标签即可

App.vue

<template>
  <div id="app">
    <TopNav/>
  </div>
</template>

<script>
import './assets/css/my.css'
import TopNav from "./components/TopNav";
export default {
  name: 'App',
  components:{
    TopNav
  },
  methods: {

  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

完成！

参考：

vue之router-view组件的使用_luoyu6的博客-CSDN博客_router-view