vue+element 项目

1.错误：导航重复:避免多余的导航到当前位置

error:NavigationDuplicated: Avoided redundant navigation to current location

解决方案：
在 router.js 文件添加一下代码

//解决方案
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this,location).catch(err => err);
}
Vue.use(VueRouter)

const routes = [
  {...}

2.父子通信组件生命周期加载顺序

image.png

3.实现跳转当前页面每次跳到顶部

使用路由全局后置守卫

route.js 文件

const router = new VueRouter({
  routes,
  // mode: 'history'
})
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});
export default router

4.vue使用高德地图api

高德地图api官网：https://developer.amap.com/product/map#/

4.1配置

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap',// 高德地图配置
    },
  },
}

4.2引入

在 index.js 文件脚本引入

/*
*@key: 高德地图api注册的key
*/
<script src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
  <div id="app"></div>

4.3 使用

<div  id="container" class="map"></div>
<script>
  import AMap from 'AMap';
  methods: {
  createMap() {
      //创建地图
      var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [120.024039,35.818754] //初始化地图中心点
    });
    //添加标记
     var marker = new AMap.Marker({
            position: [120.024039,35.818754],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    },
},
created() {
  this.createMap();
}
</script>

4.4 效果

image.png

5.动态引入图片

在data写图片路径,需要在图片路径添加 require 进行解析。

data() {
  return: {
  info: {
          id: 1,
          icon: require("@/assets/images/main/icon_phone.png"),
          name: "电话",
          desc: "400-0309-360",
        },
  }
}

//使用
<img :src="info.icon" />

2.在css写图片路径，需要在图片路径添加 ~ 修饰符。

background-image: url("~@/assets/images/main/us_bg.png");

6.box-shadow 阴影

box-shadow属性接收一个由5个参数组成的值，每个值的意思如下：

h-shadow: 水平阴影的位置 (x轴上阴影的位置，正数右边，负数左边)
v-shadow:垂直阴影的位置 (y轴上阴影的位置，正数上面，负数下面)
blur：模糊距离 （这个值代表阴影的模糊半径，如果是“0”意味着阴影是完全实心的，没有任何模糊效果。该值越大，实心度越小，阴影越朦胧和模糊，该值不支持负数。）
spread：阴影的尺寸 （如果正值会在元素的四个方向延伸阴影。负值会使阴影变得比元素本身尺寸还要小。）
color：阴影的颜色 （指定阴影的颜色）
用法：

&:hover {
              box-shadow: -2px 2px 8px 4px #c3c3c3;
            }

效果图：

image.png

7.使用vue时需要加载初始化数据

• 问题描述：

1. 在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。
2. 此时如果在mounted生命周期里获取this.data是获取不到的。

• 问题分析：

1. 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。
2. 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢

• 解决办法：

1. 在data里进行数据的定义

data(){
    dataList:''
}

2. 使用watch方法的数据监听

    watch:{
        dataList(){
            this.$nextTick(()=>{
                //此时就可以获取到在created赋值后的dataList了
            })
        }
    }

至此，遇到的问题就以解决~~~

8.js随机生成数

js 可以使用 Math（算数） 对象来实现随机数的生成。

| ceil(x) | 对数进行上舍入，即向上取整。 |
| floor(x) | 对 x 进行下舍入，即向下取整。 |
| round(x) | 四舍五入。 |
| random() | 返回 0 ~ 1 之间的随机数，包含 0 不包含 1。 |

Math.ceil(Math.random()*10);     // 获取从 1 到 10 的随机整数，取 0 的概率极小。

Math.round(Math.random());       // 可均衡获取 0 到 1 的随机整数。

Math.floor(Math.random()*10);    // 可均衡获取 0 到 9 的随机整数。

Math.round(Math.random()*10);    // 基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半。

9.md5加密数据

• npm安装

npm install js-md5

• 全局引用挂载

import md5 from 'js-md5'
Vue.prototype.$md5 = md5

• 使用

  mounted () {
    console.log(this.$md5('1233445'))
  }

• 局部引用和使用

import md5 from 'js-md5'
console.log(md5('1233445'))

10.echarts 图表的使用

• NPM 安装 ECharts

npm install echarts --save

• 引入ECharts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

• 例子

<template>
  <div id="App">
    <!-- echarts -->
    <div id="main"></div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
  name: "App",
  components: {},
  setup() {
    // 基于准备好的dom，初始化echarts实例
    const createEcharts = function () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      let ec = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }
      myChart.setOption(ec);
    };
    onMounted(() => {
      createEcharts();
    });
    return {
      createEcharts,
    };
  },
};
</script>
<style scoped>
#App {
  height: 100vh;
  width: 100vw;
  margin: auto;
}
#main {
  width: 50%;
  height: 50%;
  
}
</style>