对Vue.js音乐播放器的总结。（二）

1

在这一章,我们要编写页面的骨架和基本的路由。在开始前,我们需要先安装两个依赖,分别是bable-runtime和babel-pollyfill。我比较喜欢在命令行来写npm i babel-polyfill。当然你们也可以在package.json里面写。

npm-install

只要在main.js中引用就可以了

引用插件

2

然后我们来编写导航栏组件,在components里面新建一个m-header文件夹并且创建一个m-header.vue。它只有样式,没有逻辑。

m-header

然后在app.vue中注册它

App.vue

再去使用它,这里要注意**html不区分大小写,当你用大写字母连在一起的时候，要把它改成用 - 相连

mheader

3

开始编写路由。
在router文件夹里新建一个index.js,并且需要import Router from 'vue-router',同时写上Vue.use(Router)。
这里要注意我们的根目录是没有东西的,所以当我们默认访问根目录的时候,给根目录一个重定向到recommend界面去。
再将我们写好的router export出去。这里要注意:路由是由组件承载的！,所以你这里有多少个路由,就要import多少个组件。

router

然后在vue中,路由的跳转和渲染需要由两个标签控制。一个是(当然也有别的办法),还有一个是来渲染这个路由。
我们将多个做成一个tab组件,将router-view放在App.vue中。（别忘了在app.vue中注册tab组件）

tab.vue

(tag属性是让router-link渲染成什么样的html5元素)

router-view

(在router-view上写是为了将各个路由的渲染缓存起来,否则每次切换路由都要重新加载,加大开销)