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>
- iphoneX的底部適配
在項目中因為底部tab欄在iphonex的顯示問題
- 方法一
@media only screen and (width: 375px) and (min-height: 690px){
#app {
padding-bottom: 0.34rem;
}
}
- 方法二
第一步：新增 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);
}
-
webpack打包后可以看見源碼
image.png
原理是你使用了 webpack 的 source-map 功能，與 vue 無關。
source-map 是“打包壓縮后的代碼”和“源代碼”的對應關系，高級瀏覽器會自動加載這個文件以便調試。
解決辦法:
將 config/index.js 中 build 下的 productionSourceMap: true,
改為 productionSourceMap: false, 即可.
- 使用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中記錄上瀏覽位置的方法
場景描述： 在當前頁面瀏覽時，點擊進入其他頁面，再返回時希望滾動到瀏覽時的位置
解決方案：
- 利用本地存儲（或者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)
})
}
將其掛載到從頁面級別的過渡組件的事件上，令其滾動行為和頁面過渡一起良好運行是可能的。但是考慮到用例的多樣性和復雜性，我們僅提供這個原始的接口，以支持不同用戶場景的具體實現。
