记录一次vue开发遇到的坑（未完...）

1. vue.js 组件添加事件
<Buttom @click.native='handleClick'>

.native 是用来区分组件的事件和组件内部的事件，当然也可以是用的$emit('myClick') 从组件内部派发事件来实现

2. vue 微信支付遇到的坑

使用的vue-router 的hash模式， 所以页面的路径是www.ssss.com/shop/#/home 的样子，但是微信支付目录验证不支持这种hash模式，所以在微信看来目录是错误。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判断当前url是否存在?参数匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}
3. 微信中拉起微信支付控件
  1. 使用wx的[jssdk](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)；是比较新的方式,需要引入威信度的jssdk
  2.  使用老的WeixinJSBridgeReady方式拉起支付控件，

这次使用的是后面这种方法： 步需要引入七牛的jssdk直接就可以拉起

```
handleWxpay() {
  if(this.isweixin) {
    //options 是接口返回的wx的一些配置信息
    this.wxReadyToPay(options)
  }else {
     console.log('open in wx')
  }
},
onBridgeReady(options){
  let that = this
  console.log(options)
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    options,
    function(res){
      console.log(res);
      //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
      switch(res.err_msg){
        case "get_brand_wcpay_request:ok": //支付成功
          console.log('支付成功')
          // that.$router.push({path:'/SettlemenSuccess'})
          break;
        case "get_brand_wcpay_request:cancel": //支付取消
          console.log('取消支付')
          break;
        case "get_brand_wcpay_request:fail": //支付失败
          console.log('支付失败')
          break;
        default:
          // console.log(res.err_msg);
        break;
      }
    }
  )
},
wxReadyToPay(options){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(options), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(options));
      document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(options));
    }
  }else{
    that.onBridgeReady(options);
  }
},
isweixin() {
  const ua = window.navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
  } else {
      return false;
  }
},
```
4. 微信中预览图片(类似微信支付)
1.微信的jssdk
2.WeixinJSBridgeReady
```
handleToSwiper(index) {
  this.current = index
  this.wxReady(index)
},
wxSwiper(index){
  let newImgs = this.newImgs.map((item) => {
    return this.host + item.filename + this.previewParameter //添加的七牛图片的参数，根据自己项目的需求添加
  })
  WeixinJSBridge.invoke('imagePreview', {
    current: newImgs[index],
    urls:newImgs  
    }
  )
},
wxReady(index){
  let that = this
  if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', that.wxSwiper(index), false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', that.wxSwiper(index));
      document.attachEvent('onWeixinJSBridgeReady', that.wxSwiper(index));
    }
  }else{
    that.wxSwiper(index);
  }
},
```
[七牛图片处理](https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2#imagemogr2-thumbnail-spec) 例如：`?imageView2/1/w/200/h/200/interlace/1/q/100'`参数，让图片，无论是横图还是竖图在n * n大小的范围你不变形的显示出来
5. vue开发环境 跨域问题 使用代理的方式解决
在开发的过程中后端给的接口，存在跨域的问题，导致在本地调试无法正常的进行，通常解决这样的问题有两种方式：
1. 后端允许跨域，（为了安全可以加一些限制，有很多种的方法，可以和后端的小伙伴进行协商解决）
2. 利用node.js 在vue-cli中使用 代理的方式，服务器去请求服务器不会存在跨域的问题。

proxyTable的配置：实际是webpack中devServer的proxy的配置

       //在vue-cli config下dev环境配置中
       const getIP = utils.getIP // 获取ip的方法
       const host = getIP() ? getIP() : 'localhost'
       const port = 9092
       const proxyTableUrl = `http://${host}:${port}/yiqi`
       const baseUrl = 'http://xxxxxxxxx.cn/'
       proxyTable: {
         [proxyTableUrl]: {
             target: baseUrl,
             changeOrigin: true, //允许跨域
             pathRewrite: {
                 '^/yiqi': ''
             }
          }
       }

访问 http://192.168.13.233:8081/yiqi/apixxxxx
代理了http://xxxxxxxxx.cn/apixxxxx

6. 获取的本地内网的ip 目的是为了达到在手机预览的目的
//环境是mac机子  window系统存在问题
const glob = require('glob');

module.exports = {
  getIP:function () {
    var os = require('os')
    var IPv4 = '127.0.0.1'
    var interfaces = os.networkInterfaces()
    for (var key in interfaces) {
      interfaces[key].some(function (details) {
        if (details.family == 'IPv4' && key == 'en0') {
          IPv4 = details.address
          return true
        }
      })
    }
    return IPv4
  }
}
7. 使用webpack 配置外部引入，避免vender.js打包过大的问题

在使用vue-cli进行打包的时候，会把一些第三方的插件打包在vender.js中，随着项目的迭代，会因为插件使用的越来越多导致vender.js过大。这种情况下可以把一些插件使用cdn，或着使用自己的地址来作为外部的引用来使用

//wwbpack.base.config.js
externals: {//CDN 引入文件 减少vendor.js体积
    // vue: 'Vue',
    swiper:"Swiper"
},

在index.html模板中引入你想使用的插件的cdn


image.png

在项目中就可以正常的使用Swiper插件了

  // sipwer.vue
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper'

在项目打包之后就在控制台查看就会看见已经引入了你想要的js


image.png

image.png

当然你也可以吧vue从外部引入使用 。本人的项目选择打包在vender.js中。

8. 日历组件

非常感谢zwhGithub自己写的calendar组件

9. axios的post 方式的使用方法
axios(url, {
   method: 'post',
   headers: {
     "content-type": "application/x-www-form-urlencoded",
     'Accept': 'application/json'
   },
   data: qs.stringify(data),
   withCredentials: true
 })
10. 图片 ，字体 , 媒体 是否打包在js中的配置（webpack）
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
    // 超过10字节 会打包到img目录下,否则打包在js中； 想要打包在    img limit:1 
        limit: 1, 
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},
{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
},
    {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}
11. webpack路径的配置 结合vue-cli
//vue-cli 中配置
build:{
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: '',
  assetsPublicPath: '/shop/',
}
 

// webpack
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
  publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
},
plugins:[
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ])
]

assetsRoot决定了webpack中输出的路径;在目录下的 dist目录

image.png

assetsSubDirectory决定了打包之后dist下的目录，
比如assetsSubDirectory:''
image.png

如果assetsSubDirectory:'static'
image.png

assetsPublicPath决定了放在服务器时的项目路径
如果assetsPublicPath:'/shop/'

image.png

如果assetsPublicPath:''
则上面的路径中的shop不存在，根据自己姓名不同的需求来配置该路径

12. 微信中改变title的坑

由于在个页面中会动态的改变的title的名字

//dom.js
export function setDocumentTitle(title = 'index') {
  if (document.title === title) {
    return
  }
  document.title = title
}

但是在微信中 ios的手机不能够改变title,采用下面的方案来hack

export function setDocumentTitle(title = 'index') {
  if (window.document.title === title) {
    return
  }
  document.title = title
  var mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // 替换成站标favicon路径或者任意存在的较小的图片即可
    iframe.setAttribute('src', '/favicon.ico')
    var iframeCallback = function () {
      setTimeout(function () {
        iframe.removeEventListener('load', iframeCallback)
        document.body.removeChild(iframe)
      }, 0)
    }
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
  }
}

参考了deboyblog的vue-wechat-title封装的方法

13. 判断是否为{} null 用在后端接口可能会存在返回的某一个字段存在null, 或者是{ }的情况，在是使用vue时会对这样的返回做出判断，比如不显示的情况。但是{} == {} //false 
/*
* 判断是否为{} null
*/
//es5的方法
export function isEmptyObject(obj) {
  for (var key in obj){
    return !obj.hasOwnProperty(key)
  }
  return true
};
//es6的方法
export function isEmptyObjectES6(obj) {
  if(Object.getOwnPropertyNames(obj).length){
    return false
  }
  return true
}
14. vconsole在vue中的使用
const debug = process.env.NODE_ENV !== 'production'
if (debug) { //vconsole 移动端调试
    const Vconsole = () => import('vconsole')
    let  vConsole = new Vconsole()
    vConsole.then(res => {
        vConsole = new res()
     }, err => {
        console.log(err)
    })
}
15. input 图片上传功能
<div class="upload-file" style="">
    <div id='bg' 
          :style="'background-image:url('+ img +')'">

    </div>
    <!-- <img v-if='img' :src="img" alt="" > -->
    <input type="file" accept="image/*" @change='upload'>
</div>

upload(e) {
  let that  = this
  let file = e.target.files[0]
  if(file) {
    if (!/image\/\w+/.test(file.type)) {
      alert("请确保文件为图像类型")
      return false;
    }
    // 图片预览 存在裁剪问题
    //const formData = new FormData()
    //formData.append('file', file)
    //axios(url,[,config]).then().catch()
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function() {
      //console.log(this.result)
      that.img = this.result
      let base64 = this.result
      let data = {
        order_id,
        base64
      }
      axios(`${baseUrl}/order/xxxxxx/`, {
        method: 'post',
        headers: {
          "content-type": "application/x-www-form-urlencoded",
          'Accept': 'application/json'
        },
        data:qs.stringify(data),
        withCredentials: true
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      }) 
    } 
  }
},
16. 分包加载
// 没有进行分包的加载 会在首次进入首页的时候加载所有的组件
import ProfilePicture from '@/components/ProfilePicture'

// 就版本的分包加载的方法
const ProfilePicture = r => require.ensure([], () => r(require('../components/ProfilePicture')), 'ProfilePicture')

// 新版webpack 3.6的分包加载
const ProfilePicture = () => import('../components/ProfilePicture')
17. tabbar的封装 当然方法也很多,懒得写了直接贴代码吧
<template>
  <div id="table-bar" class="border-top-1px">
    <div class="items" @click='switchTab("Home")'
      :class="$route.path.indexOf('Home') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Home') !== -1" 
          src="../images/icon_shouye.png" alt='active'/>
        <img v-else src="../images/icon_shouye2.png" alt="normal">
      </div>
      <div class="text">
        首页
      </div>
    </div>
    <div class="items" @click='switchTab("Order")'
      :class="$route.path.indexOf('Order') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Order') !== -1" 
          src="../images/icon_dingdan.png" alt='active'>
        <img v-else src="../images/icon_dingdan2.png" alt="normal">
      </div>
      <div class="text">
        订单
      </div>
    </div>
    <div class="items" @click='switchTab("Mine")'
      :class="$route.path.indexOf('Mine') !== -1? 'active' : ''">
      <div class="icon">
        <img v-if="$route.path.indexOf('Mine') !== -1" 
          src="../images/icon_me2.png" alt="active">
        <img v-else src="../images/icon_me.png" alt="normal">
      </div>
      <div class="text">
        我的
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TableBar",
  data(){
    return {

    }
  },
  methods: {
    switchTab(path) {
      this.$router.replace(path)
    }
  },
  mounted() {
    
  },
}
</script>
<style lang='less' scoped>
  @import '../styles/mixin.less';
  @import '../styles/base.less';
  #table-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.5rem;
  }
  .items{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: @subtitle-color;
    font-size: 0.11rem;
  }
  .text{
    font-size: 0.11rem;

  }
  .icon{
    width: 0.22rem;
    height: 0.22rem;
    overflow: hidden;
    margin-bottom: 0.03rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .active{
    color: @title-color;
  }
</style>
17. swiper插件 自定义分页器 直接上代码吧
<template>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" 
          v-for='(item, index) in banners'
          :key='index'>
          <img :src="item" alt="" style='width:100%;height:100%'>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->
    </div>
    <!--自定义的分页器 非官方-->
    <div v-cloak class="pagination swiper-pagination-custom">
      <span class="swiper-pagination-customs"
      :class="{'swiper-pagination-customs-active':index+1 == swiperActIndex}"
      v-for="(item, index) in banners"
      :key='index'></span>
    </div>
  </div>
</template>
<script>
  import '@/plugins/css/swiper-3.4.2.min.css';
  import Swiper from 'swiper';
  export default {
    name: "",
    data: () => ({
      swiperActIndex:1
    }),
    props:['banners'],
    methods:{
      _initScroll() {
        let that = this
        if(this.mySwiper) {
          this.mySwiper.destroy(true, true)
        }else {
          this.mySwiper = new Swiper('.swiper-container', {
            autoplay: 3000,// 可选选项，自动滑动
            speed:1000,
            loop:true,
            autoplayDisableOnInteraction:false, // hack 滑动后自动轮播停止
            pagination: '.swiper-pagination',
            paginationType : 'custom',
            paginationCustomRender(mySwiper, current, total) {
              var customPaginationHtml = "";
              for(var i = 0; i < total; i++) {
                if(i == (current - 1)) {
                customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                } else {
                customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
                }
              }
              return customPaginationHtml;
            },
            onSlideChangeStart: function(swiper){
              // loop属性会影响len的值
              let len = swiper.slides.length - 2
              if(swiper.activeIndex === len+1) {
                that.swiperActIndex = 1
              }else if(swiper.activeIndex === 0) {
                that.swiperActIndex = len
              }else {
                that.swiperActIndex = swiper.activeIndex
              }

            }
          })
        }
      }
    },
    mounted() {
      setTimeout(function(){
        this._initScroll()
      }.bind(this),300)
    }

  }
</script>
<style lang="less" scoped>
  @import '../styles/base.less';

  .swiper-container{
    width: 3.3rem;
    height: 3.3rem;
  }
  .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .pagination{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 0.2rem;
  }
  /*包裹自定义分页器的div的位置等CSS样式*/
  .swiper-pagination-custom {
    bottom: -0.2rem;
    left: 0;
    width: 100%;
  }
  /*自定义分页器的样式，这个你自己想要什么样子自己写*/
  .swiper-pagination-customs {
    width: 0.08rem;
    height: .01rem;
    display: inline-block;
    background: #000;
    opacity: .3;
    margin: 0 .07rem;
    background-color: @subtitle-color
  }
  /*自定义分页器激活时的样式表现*/
  .swiper-pagination-customs-active {
    opacity: 1;
    background-color: @title-color;
  }

</style>
  1. iphoneX的底部适配

在项目中因为底部tab栏在iphonex的显示问题

  1. 方法一
@media only screen and (width: 375px) and (min-height: 690px){
  #app {
     padding-bottom: 0.34rem;
   }
 }
  1. 方法二

第一步：新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配

  • 类型一：fixed 完全吸底元素（bottom = 0）
{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  • 类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等
{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

  1. webpack打包后可以看见源码


    image.png

    原理是你使用了 webpack 的 source-map 功能，与 vue 无关。
    source-map 是“打包压缩后的代码”和“源代码”的对应关系，高级浏览器会自动加载这个文件以便调试。

解决办法:

将 config/index.js 中 build 下的 productionSourceMap: true,
改为 productionSourceMap: false, 即可.
  1. 使用flex布局 在ios上页面无法滚动的hack方案（在安卓上没遇见这种问题）

描述：在使用flex布局，在滚动的box有滚动时，当第一次进入页面时，页面出现无法滚动的问题。但是进入其他页面，再次返回该页面就可以滚动了（在两次项目中都遇见了这样的问题）

坑：原本以为是由于图片渲染的时候高度没有确定，导致的高度问题引发的内容没有填充box的问题。但是使用了在img标签外面写固定高度的div来解决，并没有效果。

最终使用了定位的方式来解决这样的问题。

eg: 会出现这种情况的代码

// html
<div class='box'>
  <div calss='content'>
     <div class='item'>
        content1
     </div>
     <div class='item'>
        content2
     </div>
  </div>
  <div class='bottom-btn'>我是一个按钮</div>
</div>


// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}

这种布局的在第一次进入的时候会有几率出现无法滚动的情况

hack: 可能是ios中对定位的比较的敏感，或者是定位可以脱离文档流的原因（还不清楚），可以使用定位的方法来hack这种问题

// html
<div class='box'>
  <div calss='content'>
    <div class='scroll-box'>
        <div class='item'>
        content1
        </div>
        <div class='item'>
        content2
        </div>
    </div>
     
  </div>
  <div class='bottom-btn'>我是一个按钮</div>
</div>


// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    position: relative;
    top:0;
    left: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.scroll-box{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}
21.vue中记录上浏览位置的方法

场景描述： 在当前页面浏览时，点击进入其他页面，再返回时希望滚动到浏览时的位置

解决方案：

  1. 利用本地存储（或者cookie）
  • 使用Storage(本地存储)， 在进入其他页面之前记录当前的滚动位置
// some click event
let scrollTop = targetDom.scrollTop
sessionStorage.setItem('scrollTop', scrollTop)
  • 返回页面的时候获取到上次的位置，并重新设置dom的滚动位置
import { domSetScrollTop } from '@/utils/dom.js'

// vue生命周期mounted
mounted:{
  let scrollTop = sessionStorage.getItem('scrollTop')
  if(!scrollTop) {
       scrollTop = 0
  }
  domSetScrollTop(this.$refs.content, scrollTop)
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

缺点：在回到当前页面的时候，在获取本地存储的时候会浪费时间，以及页面渲染的时间，会导致回到上次的位置并不是很准确。所以采取了下面这种方式来实现。

2 . 使用vue路由中的元信息进行存储（使用vuex的放在全局也可以进行存储，没有试验应该算一个思路）

// CurrentPage.vue
// utils
import { domSetScrollTop } from '@/utils/dom.js'
//mixins
import { metaScroll } from '@/components/mixins/metaScroll'
  
 mixins:[metaScroll], //记录位置
 methods:{
    handleClick(sku_id){
      this.setRouteMeta('scrollTop', this.$refs.content.scrollTop)
      this.$router.push({name:'ProfilePicture',params: { id }})
    },
    _setScrollTop(){
        let scrollTop = this.getRouteMeta().scrollTop
        if(!scrollTop) {
          scrollTop = 0
        }
     domSetScrollTop(this.$refs.content, scrollTop)
    },
  },
  mounted() {
    this._setScrollTop()
  },

// mixins/scrollTop.js
export const metaScroll =  {
  methods:{
    getRouteMeta() {
      return this.$route.meta
    },
    setRouteMeta(attribute, val){
      this.$route.meta[attribute] = val
    }
  }
}

// utils/dom.js
export function domSetScrollTop(dom, scrollTop) {
  dom.scrollTop = scrollTop
}

// router/index.js
{
    path: '/CurrentPage',
    name: 'CurrentPage',
    component: CurrentPage,
    meta:{
      scrollTop:0
    }
},

3 . 使用 vue-router的滚动行为

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

举例：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模拟『滚动到锚点』的行为：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子请移步这里。

异步滚动

2.8.0 新增

你也可以返回一个 Promise 来得出预期的位置描述：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,444评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,421评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,363评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,460评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,502评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,511评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,280评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,736评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,848评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,531评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2赞 352

推荐阅读更多精彩内容

  • Vue相关开源项目库汇总(史上最全)
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★13489 ...
    余生社会阅读 19,697评论 7赞 233
  • 2017-07-01
    好像现在对每个人 只要一不符合我想法的人 我就会烦躁 但是其实我也没有预期 要这个人怎么样 但是假如他做的让我不开...
    是我啊啊吗吗阅读 250评论 0赞 0
  • 2017-08-17
    今天上午来了北京动物园，第一次来。看了很多叫不上名字的鸟，看到了大象，熊猫。熊猫馆的人很多，里三层外三层，好不容易...
    柠檬安然阅读 136评论 0赞 0