【035】vue-cli4.0基础学习：继续创建组件

在上一章中，我们已经创建了头部导航组件，那么，点击不同的导航菜单，肯定是出现不同的内容的。下面我们再来创建两个组件v-index和v-about。

创建首页v-index组件

我们在 components 文件夹中创建一个v-index.vue文件，也就是v-index组件。

全部代码：

<template>
    <div class="v-index">
        <h1>我是首页</h1>
    </div>
</template>

<script>
export default {
    name: 'v-index',
    desc: '首页'
}
</script>

<style scoped>
.v-index {
    padding: 20px 30px;
}
</style>

创建关于v-about组件

我们在 components 文件夹中创建一个v-about.vue文件，也就是v-about组件。

<template>
    <div class="v-about">
        <h1>我是关于</h1>
    </div>
</template>

<script>
export default {
    name: 'v-about',
    desc: '关于'
}
</script>

<style scoped>
.v-about {
    padding: 20px 30px;
}
</style>

新的问题

现在我们已经把v-index和v-about两个组件都创建完了，接下来就应该引入组件了。这个时候，问题来了，按照我们理解，点击首页引入v-index组件，点击关于引入v-about组件。那么，我们应该怎么做呢？

难道是在App.vue中一起引入这两个组件，然后依靠v-if点击不同的导航菜单引入不同的组件吗？这样好像也是可以实现，但是总感觉哪里怪怪的。这个时候，就到了vue-router出场了。