uniapp和vue使用上的差異

1、取路由地址和url上的參數不一樣

vue:

this,$route.path
this,$route.query.參數名

 

uniapp:

自己封裝一個方法
/**
 * 獲取當前路由
 *
 * @return {Object} path: 路由路徑, query: 路由參數
 */
export const getCurrentRoute = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return {
    path: currentPage.route,
    query: currentPage.options || currentPage.$route.query,
  }
}

使用：
getCurrentRoute().path
getCurrentRoute().query.參數名

 

2、獲取dom節點信息

vue: 

元素設置ref: <div ref=""myDiv" id="text">設置ref</div>

獲取div: this.$refs.myDiv、this.$refs['myDiv']

vue中操作dom需要謹慎，尤其是添加或刪除dom的時候，特別是mounted()和created()的時候，此時dom對象還沒有生成，要放在this.nextTick()的回調函數中。

 

uniapp:

getDomEle() {
     const query = uni.createSelectorQuery().in(this);
     query.select('#text').boundingClientRect(data => {
         console.log(data)
    }).exec();
}

 當然如果你給標簽定義了ref,也可以使用vue的方式獲取元素

3、路由跳轉

vue: 

1、this.$router.push({path:'/home',query: {id:'1'}}) // 跳轉到指定url路徑，並向history棧中添加一個記錄，點擊后退會返回到上一個頁面

2、this.$router.replace({path:'/home',query: {id:'1'}}) // 跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)

3、this.$router.go(n) // 向前或者向后跳轉n個頁面，n可為正整數或負整數

4、<router-link :to="{path:'/home'}"> //name,path都行, 建議用name  
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。

uniapp:

1、uni.navigateTo({ url: 'test?id=1&name=uniapp' }); //保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。
//這里要注意使用這種方式跳轉的，返回最好使用navigateBack,這樣當前的歷史記錄才會pop出去，不然會爆內存閃白屏
//比如A-B-C-D, 此時返回B，最好使用uni.navigateBack({delta: 2}) delta這個值要你自己去計算;
//如果你使用的是nagigateTo,那頁面棧（getCurrentPages這個方法可以查看現在的路由歷史記錄）里又會push一個B 也就是此時的棧里是A-B-C-D-B，然后一直循環 
//最后就會變成這樣A-B-C-D-B-C-D-B-C-D-B-C-D...循環多了內存就爆了

2、uni.redirectTo({ url: 'test?id=1' }); // 關閉當前頁面，跳轉到應用內的某個頁面。其實就是實現當前頁面路由不留痕，不會push到頁面棧里 還有就是這個方便不會有跳轉的動畫

3、uni.reLaunch({ url: 'test?id=1' }); // 關閉所有頁面，打開到應用內的某個頁面。

4、uni.switchTab({ url: '/pages/index/index' }); // 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。

5、uni.navigateBack({ delta: 2 });// 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

6、uni.preloadPage({url: "/pages/test/test"}); // 預加載頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。

官網地址：https://uniapp.dcloud.io/api/router.html#navigateto

 待更......