vue2.0中怎么做锚点定位

可以透过 vue-router 里面的 scrollBehavior 实现

前提是你是使用 History 模式

html 部分就是按照你贴出来的图

// 例子，自行对应到你项目的代码

const router = new VueRouter({

routes,

mode: 'history',

scrollBehavior (to, from, savedPosition) {

// 如果你的连结是带 # 这种

// to.hash 就会有值(值就是连结)

// 例如 #3

if (to.hash) {

return {

// 这个是透过 to.hash 的值来找到对应的元素

// 照你的 html 来看是不用多加处理这样就可以了

// 例如你按下 #3 的连结，就会变成 querySelector('#3')，自然会找到 id = 3 的元素

selector: to.hash

}

}

}

})

在vue中实现锚点定位效果

iview爬坑点 且需要把滚动容器的id或者class穿给锚点组件

利用iview 锚点组件 原先绑定id写在蓝框区域 导致锚点位置不对

法一的好处就是刷新页面仍能保持当前位置，因为id直接写进路由的

法二刷新返回顶处

基于vue-cli3的项目，改造成SSR。

服务端渲染会提取组件的样式内联到html中，与link标签中的重复，使得页面体积变大，导致响应时间很慢。

原因是ssr会自动进行资源注入 Manual Asset Injection ，包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数，关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中

当创建bundlerender的时候，我们可以使用一个模板，在这个模板里面预置页面所需要的各种资源。

思来想去，csr（客户端渲染）模式下生成的index.html再合适不过了。

而且，当build csr时，我们也可以预置一个模板，在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vue.config.js和build script(windows 平台)

---