uniapp app怎么判断当前是哪个页面-猿码集

uniapp app怎么判断当前是哪个页面

介绍

在开发uniapp app时，我们需要判断当前用户所在的页面，以便在相应的页面上做出不同的操作。uniapp提供了一些方法来帮助我们判断当前所在的页面。

判断当前页面的方法

我们可以使用uniapp提供的 $mp.page 对象来获取当前所在的页面对象。该对象是一个Vue实例，我们可以通过它来获取到当前所在的页面名称，以及其他一些页面相关的信息。


// 获取当前页面对象
const currentPage = getCurrentPages().pop()
// 获取当前页面名称
const currentRoute = currentPage.route

getCurrentPages()方法返回一个数组，里面按照栈的顺序存放了用户进入的所有页面，我们可以通过pop()方法获取到栈顶的页面，即当前页面。

currentRoute属性表示当前页面的路径，我们可以根据页面的路径来判断当前所在的页面。

判断当前页面的方式

上面的方法可以帮助我们获取到当前页面的名称，但是如何判断当前所在的页面呢？有以下几种方法：

方法1：在页面对象上定义一个标记属性

我们可以在每个页面的Vue实例上定义一个标记属性，表示这个页面的唯一标识。比如：


// index.vue
export default {
  data() {
    return {
      pageId: 'index'
    }
  }
}


// detail.vue
export default {
  data() {
    return {
      pageId: 'detail'
    }
  }
}

然后在获取到当前页面对象后，通过判断标记属性的值来判断当前所在的页面。


const currentPage = getCurrentPages().pop()
if (currentPage.pageId === 'index') {
  // 当前所在的是 index 页面
} else {
  // 当前所在的是 detail 页面
}

方法2：根据页面的路径来判断

我们可以根据页面的路径来判断当前所在的页面。uniapp提供了一个全局的变量$mp，里面包含了一些与页面相关的信息，比如页面路径。


if ($mp.page.route === 'pages/index/index') {
  // 当前所在的是 index 页面
} else {
  // 当前所在的是 detail 页面
}

方法3：利用路由守卫

我们可以利用uniapp的路由守卫机制，在路由跳转前执行一些特定逻辑，比如判断当前所在的页面。

在app.vue中定义全局路由守卫：


export default {
  onShow() {
    uni.$on('beforeEnter', (to, from, next) => {
      console.log('beforeEnter: ', to, from)
      if (to.route === 'pages/index/index') {
        console.log('当前所在页面是 index')
      } else {
        console.log('当前不在 index 页面')
      }
      next()
    })
  }
}

然后在每个页面的生命周期方法beforeRouteEnter中触发路由守卫：


export default {
  beforeRouteEnter(to, from, next) {
    uni.$emit('beforeEnter', to, from, next)
    next()
  }
}

这样，每次路由发生变化时，都会触发路由守卫，并且可以在守卫中判断当前所在的页面。

总结

以上就是uniapp app怎么判断当前是哪个页面的方法。我们可以通过获取当前页面对象的方式来获取当前页面的名称或路径，然后根据页面的标记属性、路径或路由守卫来判断当前所在的页面。

uniapp app怎么判断当前是哪个页面