简单路由
在安装脚手架的时候把路由安上,
打开命令行
切换到项目的目录
npm install vue-router --save
文件结构说明
![这里写图片描述](https://img-blog.csdn.net/20171123212557295?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
mian.js页面配置文件说明
![这里写图片描述](https://img-blog.csdn.net/20171123213925341?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
router–>index.js 路由文件说明
![这里写图片描述](https://img-blog.csdn.net/20171123214544805?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
开工
1. 新建3个组件
![这里写图片描述](https://img-blog.csdn.net/20171123220103630?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
pageone.vue代码
<template>
<div class="hello">
<h1>pageone</h1>
</div>
</template>
pagetwo.vue pagethree.vue代码同上
2. main.js修改
![这里写图片描述](https://img-blog.csdn.net/20171123220724995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3.router–>index.js修改
![这里写图片描述](https://img-blog.csdn.net/20171123221418827?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
4. app.vue修改
![这里写图片描述](https://img-blog.csdn.net/20171123221736682?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果图
![这里写图片描述](https://img-blog.csdn.net/20171123222016776?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzExMjYxNzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)