vue-router没有效果的问题解决之一

最近在学习vue,刚好学到vue-router，按照视频敲的代码，就是没有出现想要的页面。最后上网查了下，才知道原因。
一：vue-router的安装：
方式1：在 初始化目录的时候,vue会提醒你安装vue-router，可以在这
个时候安装vue-loader
方式2：在终端进入项目，输入 npm install vue-router –save 也会安
装vue-router

二：vue-router的使用:
1.一般会在入口的js文件(main.js)中引入vue-router：import Router
from “vue-router”
2.在main.js中使用vue-router：Vue.use(Router)
3.在main.js中实例化vue-router这个构造函数：
var router = new Router({
routes：[ //注意这是是routes，不是routers，少了r
{
path：’/’ , //代表根目录
component：Hello //以引入Hello.js为例
},
{
path：’/apple.vue’ , //路径
component：Apple //跳转的组件(该组件需要引入到
main.js)
}
]
})
4.添加vue-router到vue实例中：
var vm = new Vue({
el:”#app”，
router：router, //将vue-router添加到Vue的实例中
……..
})
5.定义vue-router显示的位置：在App.vue的模版文件中插入标签：

loacalhost:8080/#/apple 就会进入到Apple组件的这个页面