前言

学这篇之前要先有的基础是vue-cli哦，不然不怎么看得懂哦。

安装vue-router

还记得之前再安装vue-cli的时候就用命令行安装过了vue-router，所以我就不用再在这个项目里安装了。

要单独安装的小伙伴先进入你的项目目录，再打开命令行，输入：npm install vue-router --save-dev

index.js

来看一下router文件夹下的index.js

从这里我们知道了，将vue组件添加到这里面就可以了。

这里解释一下那个path，就是我们在url地址栏里看到的#号后面那个斜杠

自定义组件

vue，是写单页面应用的，因此一个vue就是一个页面。清楚了上面的逻辑，现在我们自己写一个vue组件，取名叫hellovue.vue，在components文件夹下面。

1、新建文件hellovue.vue

2、hellovue.vue进行编码

之前我们有学过，在vue里面，有三部分构成，template、script、style

3、在index.js里引入

4、在index.js里配置

5、运行一下试试看

命令行:npm run dev

浏览器:http://localhost:8080/#/hellovue

制作导航栏

现在我们要切换页面的话，就是修改浏览器中的地址，那么，有什么便捷的方法呢？

router-link

导航链接，就像我们使用a来跳转页面一样

1、先看看他的语法

<router-link to="xxx">点击我跳转</router-link>

to后面是路径，这个路径填的就是在index.js里面配置路由的时候填的那个path

2、添加新的组件mycenter.vue

<template>
<div>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>address:{{address}}</p>
</div>
</template>
<script>
export default {
name:'mycenter',
data(){
return {
name:'vuecat',
age:2,
address:'sctu'
}
}
}
</script>
<style scoped>
p{color: rgb(148, 96, 235);}
</style>