规划驾车路线和途径点及判断车辆路线偏移

2020-02-24 18:48:34

参考地址规划驾车路线和途径点及判断车辆路线偏移

仅供参考，我还是推荐用矩形判断，嘿嘿。

star: 项目需求需要利用百度地图构建路线并支持设置途径点，以及可以实时监控车辆是否偏移路线；两种方案。

写了比较完整的注释了，替换ak可直接看效果，规划驾车路线和途径点及判断车辆路线偏移源码：

方法一：

<html>

<head>

body,

html,

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "微软雅黑";

}

</style>

<title>规划驾车路线和途径点及判断车辆位置偏移</title>

</head>

<body>

</body>

</html>

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件

map.addControl(new BMap.ScaleControl()); // 添加比例尺控件

map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

map.enableScrollWheelZoom(true);

//起点-终点

var startSpot = new BMap.Point(116.434913, 39.851941);

var endSpot = new BMap.Point(116.528038, 39.789194);

//途径点

var waypointsList = new Array();

waypointsList.push(new BMap.Point(116.456172, 39.833542));

// waypointsList.push(new BMap.Point(116.501384, 39.832991));

// waypointsList.push(new BMap.Point(116.53353, 39.802379));

// 车辆动态坐标点

var dynamicZb = new BMap.Point(116.382997,39.791302);

//清除地图上所有的覆盖物

// map.clearOverlays();

//创建驾车实例

var driving = new BMap.DrivingRoute(map);

// 判断有无途径点

if (waypointsList.length > 0) {

//第一个驾车搜索(开始路段)

driving.search(startSpot, waypointsList[0]);

// 途径点路段

for (var i = 0; i < waypointsList.length - 1; i++) {

driving.search(waypointsList[i], waypointsList[i + 1]);

}

//第二个驾车搜索(终止路段)

driving.search(waypointsList[waypointsList.length - 1], endSpot);

} else {

driving.search(startSpot, endSpot);

}

//通过驾车实例，获得一系列点的数组

var zbList = new Array();

// 多路段坐标临时变量

var zbLinshi;

/**

* 路段数统计(与途径点(数组长度+1) 拿到完整坐标点数)

* 如：1,2,3,4 起点终点：1/4 途径点：2/3 需绘画3次路段

var routeCount = 0;

driving.setSearchCompleteCallback(function() {

routeCount++;

console.log("路段数：" + routeCount);

var pts = driving.getResults().getPlan(0).getRoute(0).getPath();

//通过驾车实例，获得一系列点的数组

var polyline = new BMap.Polyline(pts);

zbLinshi = polyline.getPath();

console.log("多路段坐标点数：" + zbLinshi.length);

// 将多个路段坐标点放入集合

for (var i = 0; i < zbLinshi.length; i++) {

// zbList.push("new BMap.Point("+zbLinshi[i].lng);

// zbList.push(zbLinshi[i].lat+")");

zbList.push(zbLinshi[i]);

// console.log(zbLinshi[i]);

}

map.addOverlay(polyline);

//创建marker

var m1 = new BMap.Marker(startSpot);

var m2 = new BMap.Marker(endSpot);

map.addOverlay(m1);

map.addOverlay(m2);

if (waypointsList.length > 0) {

for (var i = 0; i < waypointsList.length; i++) {

map.addOverlay(new BMap.Marker(waypointsList[i]));

}

//创建个label

var lab1 = new BMap.Label("起点", {

position: startSpot

});

var lab2 = new BMap.Label("终点", {

position: endSpot

});

map.addOverlay(lab1);

map.addOverlay(lab2);

if (waypointsList.length > 0) {

for (var i = 0; i < waypointsList.length; i++) {

map.addOverlay(new BMap.Label("途径点" + (i + 1), {

position: waypointsList[i]

}));

}

// setTimeout(function() {

var viewPorts = new Array();

viewPorts.push(startSpot);

if (waypointsList.length > 0) {

for (var i = 0; i < waypointsList.length; i++) {

viewPorts.push(waypointsList[i]);

}

viewPorts.push(endSpot);

map.setViewport(viewPorts);

//调整到最佳视野

// }, 1000);

});

/* 实时监测返回状态

BMAP_STATUS_SUCCESS 检索成功。对应数值“0”

BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”

BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”

BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”

BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”

BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”

BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”

BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”

BMAP_STATUS_TIMEOUT 超时。对应数值“8” */

var checkgetStatus = setInterval(function() {

if (driving.getStatus() == 0 && waypointsList.length + 1 == routeCount) {

// 返回成功终止检测

clearInterval(checkgetStatus);

console.log("---保存坐标数组----：" + zbList);

//判断路线偏移

CheckRouteDeviation(dynamicZb, zbList, 200);

}

}, 1000);

(判断路线偏移)点是否在线上(通过以每个坐标点为圆心,自定以半径范围；检测某个坐标点是否在圆中)

dynamicZb：要判断的坐标；zbList：线路坐标数组；radius：半径范围

function CheckRouteDeviation(dynamicZb, zbList, radius) {

var circles = [];

//遍历坐标集合，以每一个坐标点为圆心，创建圆

for (var i = 0; i < zbList.length; i++) {

var c = zbList[i]; //圆心

//测试圆 radius代表圆的半径距离单位：米

var circle = new BMap.Circle(c, radius);

circles.push(circle);

// 绘画圆

map.addOverlay(circle);

}

// console.log("测试圆：" + circles);

//循环遍历判断车辆当前坐标点是否在圆里

var flag = false;

for (var i = 0; i < circles.length; i++) {

//point:当前坐标点、circles[i]:规划好的圆

var result = BMapLib.GeoUtils.isPointInCircle(dynamicZb, circles[i]);

if (result == true) { //true：点是在圆圈里

flag = true;

break;

}

console.log("点是否在线路上(是否在线路坐标点圆中)：" + flag);

}

$(function() {

// ptInCircle();

})

// ----------------------------------------- 未用 ----------------------------

//点在圆内

function ptInCircle() {

var pt = new BMap.Point(116.404, 39.915); //测试点

var c = new BMap.Point(116.404, 39.915); //圆心

var circle = new BMap.Circle(c, 500); //测试圆

var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);

if (result == true) {

// alert("点在圆形内");

} else {

// alert("点在圆形外")

}

//演示：将点与圆形添加到地图上

// map.clearOverlays();

// var mkr = new BMap.Marker(pt);

// map.addOverlay(mkr);

map.addOverlay(circle);

}

//点在圆外

function ptOutCircle() {

var pt = new BMap.Point(116.396, 39.915); //测试点

var c = new BMap.Point(116.404, 39.915); //圆心

var circle = new BMap.Circle(c, 500); //测试圆

var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);

if (result == true) {

alert("点在圆形内");

} else {

alert("点在圆形外")

}

//演示：将点与圆形添加到地图上

map.clearOverlays();

var mkr = new BMap.Marker(pt);

map.addOverlay(mkr);

map.addOverlay(circle);

}

</script>

方法二：

<html>

<head>

body,

html,

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "微软雅黑";

}

</style>

<title>整合修改官方驾车路线途经点途径点demo</title>

</head>

<body>

</body>

</html>

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.enableScrollWheelZoom(true);

var p1 = new BMap.Point(116.301934, 39.977552);

var p2 = new BMap.Point(116.508328, 39.919141);

// 途径点

var t1= new BMap.Point(116.365942, 39.996165);

var t2 = new BMap.Point(116.408757, 39.995704);

var waypointsList = [t1,t2];

var driving = new BMap.DrivingRoute(map, {

renderOptions: {

map: map,

autoViewport: true

}

});

driving.search(p1, p2, {

waypoints: waypointsList

}); //waypoints表示途经点

// 多路段坐标临时变量

var zbList = [];

driving.setSearchCompleteCallback(function() {

// 取出每段路坐标点数组

for (var i = 0; i <= waypointsList.length; i++) {

var pts = driving.getResults().getPlan(0).getRoute(i).getPath();

var zbLinshi = new BMap.Polyline(pts).getPath();

console.log("多路段坐标点数：" + zbLinshi.length);

// 多段路坐标点整合

zbList = zbList.concat(zbLinshi);

}

console.log("多路段坐标点数：" + zbList.length);

for (var i = 0; i < zbList.length; i++) {

console.log(zbList[i].lng+","+zbList[i].lat);

}

);

// 坐标点画圆展示

var checkgetStatus = setInterval(function() {

if (driving.getStatus() == 0) {

// 返回成功终止检测

clearInterval(checkgetStatus);

// 画圆

CheckRouteDeviation(0, zbList, 200);

}

}, 1000);

// 画圆

function CheckRouteDeviation(dynamicZb, zbList, radius) {

var circles = [];

//遍历坐标集合，以每一个坐标点为圆心，创建圆

for (var i = 0; i < zbList.length; i++) {

var c = zbList[i]; //圆心

//测试圆 radius代表圆的半径距离单位：米

var circle = new BMap.Circle(c, radius);

circles.push(circle);

// 绘画圆

map.addOverlay(circle);

}

// console.log("测试圆：" + circles);

// //循环遍历判断车辆当前坐标点是否在圆里

// var flag = false;

// for (var i = 0; i < circles.length; i++) {

// //point:当前坐标点、circles[i]:规划好的圆

// var result = BMapLib.GeoUtils.isPointInCircle(dynamicZb, circles[i]);

// if (result == true) { //true：点是在圆圈里

// flag = true;

// break;

// }

// console.log("点是否在线路上(是否在线路坐标点圆中)：" + flag);

}

</script>

通过线路所有坐标点规划路线(回显线路) 源码：

<html>

<head>

body,

html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

}

#allmap {

height: 500px;

width: 100%;

}

</style>

<title>通过坐标点绘画线路</title>

</head>

<body>

</body>

</html>

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.enableScrollWheelZoom(true);

//途径点

var waypointsList = new Array();

waypointsList.push(new BMap.Point(116.456172, 39.833542));

waypointsList.push(new BMap.Point(116.501384, 39.832991));

waypointsList.push(new BMap.Point(116.53353, 39.802379));

$(function() {

var zbList = [

new BMap.Point(116.434896,39.851921),new BMap.Point(116.434825,39.851913),new BMap.Point(116.434654,39.851916),new BMap.Point(116.434172,39.851924),new BMap.Point(116.433598,39.851925),new BMap.Point(116.432602,39.851943),new BMap.Point(116.431988,39.851964),new BMap.Point(116.431737,39.851988),new BMap.Point(116.431486,39.852002),new BMap.Point(116.431264,39.852026),new BMap.Point(116.430902,39.852043),new BMap.Point(116.430399,39.852071),new BMap.Point(116.428398,39.852125),new BMap.Point(116.428177,39.852129),new BMap.Point(116.428177,39.852049),new BMap.Point(116.428176,39.852049),new BMap.Point(116.428165,39.851779),new BMap.Point(116.428165,39.851629),new BMap.Point(116.428165,39.851629),new BMap.Point(116.428155,39.851159),new BMap.Point(116.428113,39.849559),new BMap.Point(116.428102,39.848949),new BMap.Point(116.428092,39.848649),new BMap.Point(116.428082,39.848419),new BMap.Point(116.428061,39.847439),new BMap.Point(116.42803,39.84638),new BMap.Point(116.428029,39.846379),new BMap.Point(116.428019,39.845789),new BMap.Point(116.428019,39.845659),new BMap.Point(116.428019,39.845449),new BMap.Point(116.427987,39.843949),new BMap.Point(116.427997,39.843459),new BMap.Point(116.427997,39.843339),new BMap.Point(116.428007,39.843219),new BMap.Point(116.428027,39.843029),new BMap.Point(116.428077,39.842758),new BMap.Point(116.428097,39.842697),new BMap.Point(116.428267,39.842265),new BMap.Point(116.428267,39.842264),new BMap.Point(116.428286,39.842023),new BMap.Point(116.428437,39.841231),new BMap.Point(116.428437,39.841231),new BMap.Point(116.428456,39.84066),new BMap.Point(116.428416,39.840301),new BMap.Point(116.428365,39.839632),new BMap.Point(116.428345,39.839472),new BMap.Point(116.428314,39.839122),new BMap.Point(116.428324,39.838882),new BMap.Point(116.428334,39.838782),new BMap.Point(116.428404,39.838611),new BMap.Point(116.428615,39.838367),new BMap.Point(116.428977,39.838211),new BMap.Point(116.42947,39.838133),new BMap.Point(116.429762,39.838108),new BMap.Point(116.429902,39.838106),new BMap.Point(116.431864,39.838062),new BMap.Point(116.43287,39.838044),new BMap.Point(116.433001,39.838052),new BMap.Point(116.433514,39.838063),new BMap.Point(116.434037,39.838073),new BMap.Point(116.434359,39.838097),new BMap.Point(116.43443,39.838096),new BMap.Point(116.434742,39.83811),new BMap.Point(116.434822,39.838119),new BMap.Point(116.435175,39.838143),new BMap.Point(116.435607,39.838215),new BMap.Point(116.435607,39.838214),new BMap.Point(116.436432,39.838209),new BMap.Point(116.439642,39.838141),new BMap.Point(116.439783,39.838138),new BMap.Point(116.440095,39.838133),new BMap.Point(116.443797,39.838058),new BMap.Point(116.448301,39.837976),new BMap.Point(116.45005,39.837951),new BMap.Point(116.45005,39.837951),new BMap.Point(116.450462,39.837845),new BMap.Point(116.450954,39.837799),new BMap.Point(116.451908,39.837766),new BMap.Point(116.4524,39.8377),new BMap.Point(116.4524,39.8377),new BMap.Point(116.453414,39.837668),new BMap.Point(116.453997,39.837661),new BMap.Point(116.453997,39.837661),new BMap.Point(116.454067,39.837481),new BMap.Point(116.454167,39.837179),new BMap.Point(116.454607,39.835824),new BMap.Point(116.454868,39.835221),new BMap.Point(116.454918,39.835111),new BMap.Point(116.455058,39.834829),new BMap.Point(116.455218,39.834578),new BMap.Point(116.455449,39.834215),new BMap.Point(116.45583,39.833742),new BMap.Point(116.4561,39.833469),new BMap.Point(116.456101,39.833468),new BMap.Point(116.456311,39.833266),new BMap.Point(116.457073,39.832619),new BMap.Point(116.457815,39.832043),new BMap.Point(116.458276,39.831689),new BMap.Point(116.458336,39.831639),new BMap.Point(116.459718,39.830569),new BMap.Point(116.46088,39.829652),new BMap.Point(116.461,39.829561),new BMap.Point(116.461131,39.829451),new BMap.Point(116.461301,39.82931),new BMap.Point(116.461421,39.829209),new BMap.Point(116.465443,39.826117),new BMap.Point(116.465583,39.826007),new BMap.Point(116.468242,39.823937),new BMap.Point(116.471398,39.821506),new BMap.Point(116.471558,39.821387),new BMap.Point(116.473194,39.820116),new BMap.Point(116.473613,39.819789),new BMap.Point(116.474072,39.819432),new BMap.Point(116.474471,39.819105),new BMap.Point(116.47464,39.818936),new BMap.Point(116.475089,39.81849),new BMap.Point(116.475189,39.818371),new BMap.Point(116.475189,39.818369),new BMap.Point(116.475588,39.817932),new BMap.Point(116.475877,39.817605),new BMap.Point(116.475907,39.817585),new BMap.Point(116.476096,39.817377),new BMap.Point(116.476884,39.816494),new BMap.Point(116.477621,39.815681),new BMap.Point(116.477691,39.815572),new BMap.Point(116.47792,39.815325),new BMap.Point(116.478578,39.814632),new BMap.Point(116.478628,39.814572),new BMap.Point(116.478887,39.814265),new BMap.Point(116.478887,39.814264),new BMap.Point(116.479415,39.81368),new BMap.Point(116.480391,39.812692),new BMap.Point(116.480739,39.812376),new BMap.Point(116.481048,39.81213),new BMap.Point(116.482024,39.811363),new BMap.Point(116.482771,39.810763),new BMap.Point(116.48292,39.810655),new BMap.Point(116.483278,39.810371),new BMap.Point(116.484572,39.80932),new BMap.Point(116.485239,39.80871),new BMap.Point(116.485975,39.807881),new BMap.Point(116.486025,39.807812),new BMap.Point(116.486025,39.807811),new BMap.Point(116.486115,39.807653),new BMap.Point(116.486493,39.807089),new BMap.Point(116.486851,39.806485),new BMap.Point(116.486861,39.806465),new BMap.Point(116.486981,39.806317),new BMap.Point(116.48702,39.806258),new BMap.Point(116.48715,39.80605),new BMap.Point(116.48717,39.80602),new BMap.Point(116.487866,39.804902),new BMap.Point(116.488304,39.80419),new BMap.Point(116.488434,39.803972),new BMap.Point(116.488951,39.803121),new BMap.Point(116.489021,39.803012),new BMap.Point(116.489071,39.802943),new BMap.Point(116.489946,39.801489),new BMap.Point(116.490812,39.800064),new BMap.Point(116.490952,39.799877),new BMap.Point(116.490991,39.799817),new BMap.Point(116.491071,39.799709),new BMap.Point(116.492533,39.798065),new BMap.Point(116.493001,39.797484),new BMap.Point(116.493369,39.797021),new BMap.Point(116.493687,39.796697),new BMap.Point(116.493827,39.79659),new BMap.Point(116.495547,39.794672),new BMap.Point(116.495548,39.79467),new BMap.Point(116.496413,39.793686),new BMap.Point(116.49892,39.790853),new BMap.Point(116.499129,39.790647),new BMap.Point(116.499228,39.790559),new BMap.Point(116.499228,39.790559),new BMap.Point(116.499577,39.790195),new BMap.Point(116.501806,39.787686),new BMap.Point(116.502253,39.787184),new BMap.Point(116.502582,39.78682),new BMap.Point(116.50298,39.786477),new BMap.Point(116.503626,39.786069),new BMap.Point(116.504144,39.785838),new BMap.Point(116.505626,39.785423),new BMap.Point(116.505626,39.785422),new BMap.Point(116.505805,39.785385),new BMap.Point(116.505984,39.785338),new BMap.Point(116.505984,39.785338),new BMap.Point(116.506441,39.785225),new BMap.Point(116.5067,39.785159),new BMap.Point(116.507526,39.784953),new BMap.Point(116.508003,39.78483),new BMap.Point(116.511089,39.784034),new BMap.Point(116.511159,39.784015),new BMap.Point(116.511408,39.783959),new BMap.Point(116.514048,39.783281),new BMap.Point(116.514387,39.783194),new BMap.Point(116.518375,39.782161),new BMap.Point(116.518405,39.782162),new BMap.Point(116.518605,39.782113),new BMap.Point(116.518605,39.782112),new BMap.Point(116.518764,39.782064),new BMap.Point(116.520431,39.781634),new BMap.Point(116.52118,39.781409),new BMap.Point(116.521569,39.781261),new BMap.Point(116.523208,39.780527),new BMap.Point(116.523438,39.780408),new BMap.Point(116.523548,39.780358),new BMap.Point(116.523588,39.780438),new BMap.Point(116.523588,39.780438),new BMap.Point(116.523648,39.780588),new BMap.Point(116.523747,39.780828),new BMap.Point(116.523747,39.780828),new BMap.Point(116.524355,39.782329),new BMap.Point(116.524944,39.78376),new BMap.Point(116.524993,39.78389),new BMap.Point(116.525811,39.78589),new BMap.Point(116.526301,39.78643),new BMap.Point(116.52654,39.78668),new BMap.Point(116.52655,39.786729),new BMap.Point(116.52665,39.786809),new BMap.Point(116.52665,39.786809),new BMap.Point(116.52679,39.786849),new BMap.Point(116.52693,39.786989),new BMap.Point(116.52701,39.787069),new BMap.Point(116.52713,39.787189),new BMap.Point(116.52739,39.787359),new BMap.Point(116.52839,39.787847),new BMap.Point(116.52867,39.787987),new BMap.Point(116.52901,39.788146),new BMap.Point(116.52921,39.788245),new BMap.Point(116.52905,39.788545),new BMap.Point(116.52905,39.788546),new BMap.Point(116.528679,39.789026),new BMap.Point(116.528539,39.789126),new BMap.Point(116.528529,39.789147),new BMap.Point(116.528329,39.789407)

];

drawRoute(map, zbList);

})

//规划路线

function drawRoute(map, zbList) {

var arrPois = [];

var lineColor = "";

//循环遍历数组

for (var i = 0; i < zbList.length - 1; i++) {

//清空数组,如若不清空，会在原来基础上每次在重复的增加一边。这儿是让每两个点画线，否则第二次进来的时候就成四个数据了，第二个重复了一次

arrPois.splice(0, arrPois.length);

// arrPois.push(this.translateBD(zbList[i].Latitude, zbList[i].Longitude));

// arrPois.push(this.translateBD(zbList[i + 1].Latitude, zbList[i + 1].Longitude));

arrPois.push(new BMap.Point(zbList[i].lng, zbList[i].lat));

arrPois.push(new BMap.Point(zbList[i + 1].lng, zbList[i + 1].lat));

//区间颜色

// if (zbList[i].Speed < 30) {

// lineColor = "#fed769";

// } else if (zbList[i].Speed > 30 && zbList[i].Speed < 60) {

// lineColor = "#b0e758";

// } else if (zbList[i].Speed > 60 && zbList[i].Speed < 90) {

// lineColor = "#37d49a";

// } else if (zbList[i].Speed > 90 && zbList[i].Speed < 120) {

// lineColor = "#0c9be4";

// } else if (zbList[i].Speed > 120) {

// lineColor = "#960100";

// }

//创建线路

window.polyline = new BMap.Polyline(

arrPois, //所有的GPS坐标点

{

// strokeColor: lineColor, //线路颜色

strokeColor: "#7F98C7", //线路颜色

strokeWeight: 4, //线路大小5

strokeOpacity: 1

//线路类型(虚线)

// strokeStyle: "dashed"

});

//绘制线路

map.addOverlay(polyline);

}

//创建marker

var m1 = new BMap.Marker(zbList[0]);

var m2 = new BMap.Marker(zbList[zbList.length - 1]);

map.addOverlay(m1);

map.addOverlay(m2);

//创建label

var lab1 = new BMap.Label("起点", {

position: zbList[0]

});

var lab2 = new BMap.Label("终点", {

position: zbList[zbList.length - 1]

});

map.addOverlay(lab1);

map.addOverlay(lab2);

}

</script>

2020-01-05 12:48:03

Spring报错：has been injected into other beans [xxx] in its raw version as part of a circular reference
发现这样的错误，一般是循环引入service引起的，比如aService引入了bService，bService又引入了aService，就会循环引入，就出错了

2020-01-06 23:02:42

Updating Homebrew... 更新了镜像依然卡死
使用brew install [软件包]安装软件包时,卡在Updating Homebrew... 或输入`brew update`更新brew,半天没反应.产生原因一般是在国内访问官方更新源获取资源太慢,解决方案可以采用更换国内镜像更新源.

2020-01-06 23:34:07

PHP - 将macOS系统下的PHP升级成最新版本（7.3），并设为默认
由于我当前使用的 Mac 电脑的 PHP 版本比较低（7.1.19），许多新特性和功能不支持，现准备将其升级成最新版（7.3.2），具体步骤如下。

2020-01-07 10:06:00

vue重定向beforeRouterEnter与replace的使用
一个登录页面，只有第一次才会出现，一旦出现过，以后再也不会出现，即使是输入该页面的url也不会跳转到该页面，只会跳转到指定的其他页面；

2020-01-07 10:09:34

Vue-- 监听路由变化，数据无法更新？
除了动态修改 $route.meta.keepAlive 还有给router-view 加key的用法，根据自己的需求酌情处理吧

2020-01-07 10:14:07

vue强制刷新组件销毁和重建
很多时候，通过重置数据将页面重置时，子组件可以提供重置的方法，或者提供props重置自己的状态。但是相对麻烦，那可以使用强制刷新来实现刷新组件。

2020-01-07 10:17:42

vue钩子函数beforeRouteUpdate没有反应
由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 `this`

2020-01-08 13:23:24

vue 中使用eventbus
为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

2020-01-08 13:30:30

vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。然后我就想，这不就是不同组件之间的数据传递问题而已吗？直接用bus 巴士事件来传递数据不就行了吗。于是，我就很愉快地进行了。关于vue中的eventbus的使用，我之前在一篇vue中的数据传递中有提到过。

2020-01-08 13:32:17

import报Unexpected identifier错误
应该是node不支持ES6的这种模块导入导出的写法，而我们项目的工程使用了webpack。