vue-router

一：单页应用
参见百度百科：https://baike.baidu.com/item/SPA/17536313
二：路由
路由是单页应用的路径管理器，单页应用相当于只有一个index.html页面，改变路径可切换至不同的页面
三：安装vue-router

npm install vue-router --save

四：index.js页面
注：框起来的是新增的内容
如果想在工程中使用vue-router，必须用Vue.use(Router)来安装路由功能

index.png

五：新增一个页面，名为apple.vue
在components文件夹下新增一个apple.vue页面，内容如下

apple.png
六：在Router文件夹的index.js下增加路由配置，配置信息见上图，此时，在地址栏输入路径，即可跳转到相应页面
vuerouter.gif
七：但是，这样在地址栏输入很麻烦且不符合常规，所以我们用<router-link>制作导航 ，也就是点击某个链接，就会跳到相对应的页面

<routet-link to="/">[名称]</router-link>
to 表示链接到哪个地址
名称是显示在页面上的，比如首页，苹果页

router-link.png
八：结果
routerlink.gif

九：另附vue的目录结构

vue目录结构.png