Vue-Router 快速上手与简单使用 Element-ui一起养成写作习惯！这是我参与「掘金日新计划 · 4 月

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

Vue-Router

介绍：Vue Router 是 [Vue.js](http://v3.vuejs.org/) 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

点击查看官方文档

vue-router | 安装

在项目的根目录打开终端
通过命令npm install vue-router下载

main.js中

导入
use 一下
创建路由

挂载到Vue实例上

//导入
import VueRouter from 'vue-router'
//use
Vue.use(VueRouter)
//创建路由
let router = new VueRouter({
  routes:[
    //配置地址 和 组件的对应关系
    {
      path:"/", //地址
      component:discovery, //组件
    }
  ]
})

new Vue({
  render: h => h(App),
  router //挂载
}).$mount('#app')

vue-router | 配置规则

通过routes属性配置 地址 和路由管理的组件关系

main.js中

导入组件
routes 属性中进行配置关系
path: 设置地址
component: 设置组件
可以配置 多个

vue-router | 路由出口

希望匹配到的组件显示在哪里，就在哪里设置一个router-view标签

多配置几组对应关系即可

discovery: 发现音乐

playlists: 推荐音乐

songs: 最新音乐

mvs: 最新mv

vue-router | 声明式导航

通过router-link标签设置 to 属性为地址可以实现点击切换

vue-router | 编程式导航

组件中通过 this.$router.push(地址) 可以通过代码实现切换

适用于：在跳转之前需要写逻辑判断

比如此处的搜索（没输入内容时，回车会弹出‘输入内容不能为空！’；输入了内容才跳转并且传递参数过去）

vue-router | 路由传参

在地址的后面写上 ? 分隔
通过 key=value&key2=value 的方式添加参数
组件中通过 this.$route.query 访问对应的 key 即可获取数据

Element-ui

饿了么前端团队推出的

一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库

安装
- 在项目的根目录打开终端
- 输入npm i element-ui下载
  
  直通官网
- main.js中
  1. 导入 Element-ui
  2. 导入样式
  3. use 一下
  快速上手
按钮

官方文档

Button 按钮

常用的操作按钮。
消息提示

官方文档

Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
tab切换

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

官方文档
分页

Pagination 分页

当数据量过多时，使用分页分解数据。

官方文档
轮播图

Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容

官方文档

Vue-Router 快速上手 与 简单使用 Element-ui