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

 待更......