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时需要加载初始化数据
- 问题描述：
- 在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。
- 此时如果在mounted生命周期里获取this.data是获取不到的。
- 问题分析：
- 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。
- 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢
- 解决办法：
- 在data里进行数据的定义
data(){
dataList:''
}
- 使用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>
