上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方法在main.js里的watch里一直监听着URL是否发生变化，如果URL变化就执行锚点定位方法。

效果：

在mian.js中添加

import {goAnchor,GetQueryString} from '../static/js/common.js';

new Vue({

el: '#app',

router,

render: h => h(App),

mounted:function(){//解决跳转到新页面不默认固定在顶部的bug

this.$router.afterEach((to, from, next) => {

window.scrollTo(0, 0)

})

},

methods:{

goAnchor,

GetQueryString,

},

watch:{

'$route.query':function(newVal,oldVal){

var maodian = newVal.maodian;

if(maodian){

this.goAnchor('#'+maodian);

}

}

}

})

mian.js中引入的common.js的内容

//跳转到锚点

function goAnchor(selector) {

console.info("selector1",selector)

var anchor = this.$el.querySelector(selector);//获取元素

console.info("anchor",anchor)

if(anchor) {

setTimeout(()=>{//页面没有渲染完成时是无法滚动的，因此设置延迟

//anchor.scrollIntoView(); //js的内置方法，可滚动视图位置至元素位置

var targetOffset=$(selector).offset().top;

console.info("targetOffset",anchor,targetOffset)

$('html,body').animate({

scrollTop: targetOffset

},

1000);

},500);

}

};

//获取参数

function GetQueryString(name){

//var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var href = window.location.href;

var r = getSearchString(name,href);

if (r != null) return decodeURI(r);

return null;

}

function getSearchString(key, Url) {

var str = Url;

str = str.substring(1, str.length);

if(str.indexOf("?")!=-1){

var arr = str.split("?")[1].split("&");// 获取？后的参数内容，并以&分隔字符串，获得类似name=xiaoli这样的元素数组

var obj = new Object();

// 将每一个数组元素以=分隔并赋给obj对象

for (var i = 0; i

var tmp_arr = arr[i].split("=");

obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);

}

return obj[key];

}

}

export {

goAnchor,

GetQueryString

}