https://router.vuejs.org/zh/

一、下载

npm install vue-router

二、引入路由和使用路由

（1）在src文件下创建router

router目录里新建一个index，把有关路由的组件放在这里

导入vue
import Vue from 'vue'
导入路由
import VueRouter from 'vue-router'
使用路由
Vue.use(VueRouter)

导入Home组件
import Home from '../pages/Home.vue'
导入List组件
import List from '../pages/List.vue'
导入About组件
import About from '../pages/About.vue'
导入News组件
import News from '../pages/News.vue'

创建路由器对象
export default new VueRouter({
定义路由信息数组
  routes:[
每一条路由信息，就是一个对象
    {
路由路径
      path:'/home',
路由名称
      name:'home',
路由组件
      component:Home
    },
    {
      path:'/list',
      name:'list',
      component:List
    },
    {
        path:'/about',
        name:'about',
        component:About
    },
    {
        path:'/news',
        name:'news',
        component:News
    }
  ]
})

（2）在main.js入口文件中引入并将路由器对象传给vue实例

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

导入当前项目中的路由器对象
import router from './router'

 全局导入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'
因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper) 

new Vue({
  render: h => h(App),
将路由器对象传给vue实例
  router
}).$mount('#app')

三、创建路由组件

（1）在src目录里创建pages文件/view文件：

①pages放页面组件
②components放业务组件

（2）在App.vue页面使用

①router-link背后的原理其实就是a链接

②在路由中使用按钮跳转有两种方式：

第一种是在router-link中直接放button，方便简洁

第二种是绑定点击事件写方法，这个的好处在于可以进行判断，如用户不是会员，无权限则不跳转

四、Swiper轮播图插件

https://www.swiper.com.cn/

（1）由于现在用的是vue2，所有目前只能用低版本的Swiper,需要下载两个

npm install swiper@5 vue-awesome-swiper@4

（2）导入有两种方式

1.全局导入，在main.js导入，所有页面都能用。全局导入开发起来更方便

导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'
因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)

2.局部导入，只在当前使用的组件内导入。局部性能好

局部导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
导入swiper的样式
import 'swiper/css/swiper.css'

export default {
  name: "Home",
注册组件
  components: {
      Swiper,
      SwiperSlide
  }}

（3）使用Swiper

五、ECharts图表

https://echarts.apache.org/zh/index.html

（1）安装ECharts

npm install echarts --save

（2）在组件中导入Charts

import * as echarts from "echarts";

（3）在组件mounted生命周期里

基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
绘制图表
myChart.setOption({
  title: {} })

（4）使用axios请求数据

1.下载axios包,在脚手架里使用第三方插件和库都是需要安装，网页则是引入

npm install axios

2.public里面是静态资源目录，它里面的文件直接请求，不需要../

   let {data} = await axios.get('data/data1.json')

Vue-cli ——路由&Swiper& ECharts