(Vue-cli)二、初始路由vue-router&安装使用sw

作者: Jinx要睡懒觉 | 来源:发表于2021-12-16 11:37 被阅读0次

1. Vue Router路由

Vue Router是Vue.js官方的路由管理器，可以实现页面的跳转。

(1) 安装路由

npm install vue-router

(2) 导入vue-router

为了使入口文件main.js尽量小，所以通常会在src文件夹中创建一个新的router文件夹，然后在该文件夹中创建index.js文件，通常将路由相关的所有信息放在该文件夹中。

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

(3) 创建路由器

将创建的路由对象使用export default直接导出，然后再在main.js中导入当前项目中的路由器对象 import router from ' ./router '

// 导入页面组件
import Home from './pages/Home.vue'
import List from './pages/List.vue'

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

(4) 配置路由器

// 导入当前项目中创建的路由器对象
import router from './router'
new Vue({
  render: h => h(App),
  // 在Vue的实例上，配置一个路由器对象
  router:router
}).$mount('#app')

此时路由的准备工作已经完成 <(￣︶￣)↗[GO!]**

(5) 使用路由

在App.vue中引入路由视图组件，用于呈现路由页面 <router-view></router-view>
在App.vue中引入路由链接组件，用于跳转路由 <router-link></router-link>

① 路由组件跳转
router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接，即要显示的内容。router-link默认会被渲染成一个 <a> 标签。
router-view是路由视图组件，用于呈现路由页面。

<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>

② 编程式路由跳转
$router 返回的是当前vue实例里面的路由器对象，给router-link标签绑定一个点击效果方法，通过 push 方法可以跳转路由，此种方法不可以连续点击同一个路由对象，会报错，解决的方式如下，添加判断条件：如果所要点击的页面的路由路径不是当前页面的路由路径，则点击有效。
编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等。
$route返回的是当前路由信息。
$router是当前vue实例里面的路由器对象。
push()通过push方法，跳转路由，并将路由地址添加到历史记录。需要注意，不能反复push同一个路由地址。
replace()通过repalce方法，跳转路由，它将当前地址替换历史记录里的最近一条地址。

<button @click="gotoHome">首页</button>&nbsp;
<button @click="gotoList">列表</button>
<router-view></router-view>

  methods: {
    gotoHome() {
      if (this.$route.path !== "/home") {
        this.$router.push("/home");
      }
    },
    gotoList() {
      if (this.$route.path !== "/list") {
        this.$router.push("/list");
      }
    }
  }

2.安装使用swiper插件(低版本)

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

(1) 安装

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

(2) 导入

① 全局导入
在入口文件main.js中全局导入。

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

② 局部导入
在需要使用swiper插件的页面组件(views下的xxx.vue)中引入。
局部导入的优势：只有在页面组件使用swiper插件时，才会引入插件，起到一个懒加载作用；全局导入不管是否使用，都会引入。局部更有利于性能优化，全局更方便开发。

// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
    // 注册组件
    components: {
        Swiper,
        SwiperSlide
    }
}

(3) 使用

 <div class="box">
  <!-- swiper组件，options属性设置配置选项 -->
  <swiper :options="swiperOptions">
    <!-- swiper组件的每一项 -->
    <swiper-slide>
        <img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">
    </swiper-slide>
    <swiper-slide>
        <img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">
    </swiper-slide>
    <!-- 分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</div>

  data() {
    return {
      // 定义swiper的配置选项
      swiperOptions: {
        // 指定分页器
        pagination: {
            // 指定分页器的容器
            el: ".swiper-pagination",
            // 点击分页器的指示点分页器会控制Swiper切换
            clickable:true
        },
        // 配置自动播放
        // autoplay:true
        autoplay:{
            //自动播放
            autoplay:true,
            // 设置间隔时间
            delay:3000,
            // 用户操作swiper之后，是否禁止autoplay
            disableOnInteraction:false
        },
        // 配置衔接滑动
        loop:true,
        // 箭头
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // slide的切换效果
        effect:'cube',
      },
    }
  },
};

3. 安装使用Echarts

(1) 在创建的项目demo安装

npm install echarts --save

(2) 在需要使用图表库的组件中导入echarts对象

import * as echarts from 'echarts';

(3) 在需要使用图表库的组件中准备容器

  <div class="charts">
    <h3>在vue项目中使用ECharts</h3>
    <div id="main"></div>
  </div>

(4) 选择示例图

在官网找到想要的示例，下载示例。

(5) 引入 ECharts

基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。

① 折线图实例
在需要使用图表库的组件中export default对外输出本模块变量
通过axios获取后台数据。（注意：axios需要先安装，再导入）

组件中代码：

<script>
// 导入echarts
import * as echarts from 'echarts';

// 导入axios
import axios from 'axios'

export default {
  name: "List",
  data() {
    return {
      // 定义一份数据
      list:[]
    }
  },
  methods: {
    // 加载数据的方法
    async loadData(){
      // 向后台发送请求获取数据
      let {data} = await axios.get('data/data1.json')
      this.list = data
      // 调用渲染数据方法
      this.showData()
    },
    // 渲染数据的方法
    showData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('container'));
      // 绘制图表
      myChart.setOption({
        // 标题
        title: {
          text: '收入记录'
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis'
        },
        // 图例组件
        legend: {
          data: this.list.map(r=>r.name)
        },
        // 网格
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          // 网格空间是否包含左侧的文本
          containLabel: true
        },
        // 工具栏
        toolbox: {
          // 各工具配置项
          feature: {
            // 保存为图片
            saveAsImage: {}
          }
        },
        // x轴数据
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        // y轴数据
        yAxis: {
          type: 'value'
        },
        // 系列
        series: this.list.map(r=>{
          return{
            name:r.name,
            type:'line',
            data:r.money.map(m=>m.money)
          }
        })
      });
    }
  },
  // 页面挂载完成
  mounted() {
    this.loadData()
  },
};
</script>

public文件下data文件下data1.json数据：

[
    {
        "name":"鹿晗",
        "money":[
            {
                "data":"周一",
                "money":2000
            },
            {
                "data":"周二",
                "money":5000
            },
            {
                "data":"周三",
                "money":8000
            },
            {
                "data":"周四",
                "money":3500
            },
            {
                "data":"周五",
                "money":1500
            },
            {
                "data":"周六",
                "money":6700
            },
            {
                "data":"周日",
                "money":2000
            }
        ]
    },
    {
        "name":"张杰",
        "money":[
            {
                "data":"周一",
                "money":1200
            },
            {
                "data":"周二",
                "money":2300
            },
            {
                "data":"周三",
                "money":800
            },
            {
                "data":"周四",
                "money":4500
            },
            {
                "data":"周五",
                "money":2300
            },
            {
                "data":"周六",
                "money":1800
            },
            {
                "data":"周日",
                "money":2700
            }
        ]
    },
    {
        "name":"王明",
        "money":[
            {
                "data":"周一",
                "money":200
            },
            {
                "data":"周二",
                "money":500
            },
            {
                "data":"周三",
                "money":800
            },
            {
                "data":"周四",
                "money":350
            },
            {
                "data":"周五",
                "money":5000
            },
            {
                "data":"周六",
                "money":6500
            },
            {
                "data":"周日",
                "money":3700
            }
        ]
    }
]

效果：

② 饼图实例

<script>
// 导入echarts
import * as echarts from 'echarts';
export default {
  name: "List",
  data() {
    return {
      list:[
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    };
  },
  mounted() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("container"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // name：数据项名称
              // value：数据值
              ...this.list.map((r) => {
                return {
                  value: r.value,
                  name: r.name,
                };
              }),
            ]
          }
        ]
      });
  },
};
</script>

效果：