效果
实现
Vue Router 官方文档
https://router.vuejs.org/zh/guide/
用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
新建Vue项目
参照
项目地址:
https://github.com/badaoliumang/VueRouterUseDemo
删改组件
删掉HelloWorld.vue,在src下新建pages目录,用于存放单页面。
下载静态资源assert,将src下的assets替换掉。
静态资源下载地址
Github:
https://github.com/badaoliumang/VueMusicPlayerAssert
修改Vue项目
App.vue
删掉div中的img,将style中的代码修改为
修改后的App.vue完整代码
新建主页面index.vue
在pages文件夹下新建文件index.vue
用于主页面。
新建歌手页面artists.vue
新建home.vue主页面
新建listcate榜单页面
新建search.vue搜索页面
新建ucenter.vue我的页面
Router下的index.js修改
项目总结构
项目是在Atom中打开,关于Atom的使用等参考:
javascript:void(0)
总结说明
1.在index.vue中
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
2.在index.vue中
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
3.定义路由组件
可以从其他文件import进来
在router下的index.js中
4.定义路由
在在router下的index.js中
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
还可以表示嵌套关系,加children。
启动项目
在项目目录下打开cmd命令行输入:
然后打开浏览器窗口,输入:
然后打开检查选项,谷歌浏览器按F12键,将浏览器模拟为手机