usePage

获取当前页面(栈)

何时使用

当需要获取页面实例或页面栈信息时

API

const [stackLength, { pageInstance, pageStack }] = usePage(scope?: string);

参数

参数	说明	类型	默认值
scope	组件内的选择器	string	-

返回值说明

返回值	说明	类型
stackLength	页面栈长度	number
pageInstance	当前页面实例(包含app)	Current
pageStack	页面栈(数组中第一个元素为首页，最后一个元素为当前页面)	Page[]

代码演示

React

basic/usePage/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell } from '@taroify/core';
import { usePage } from 'taro-hooks';

export default () => {
  const [stackLength, { pageInstance = {} }] = usePage();

  return (
    <DemoContent>
      <Cell.Group clickable>
        <Cell title="路由栈长度" brief={stackLength}></Cell>
        <Cell title="当前页面信息" brief={JSON.stringify(pageInstance)}></Cell>
      </Cell.Group>
    </DemoContent>
  );
};

Vue

basic/usePage/index

<template>
  <demo-content>
    <nut-cell title="路由栈长度" :sub-title="stackLength"></nut-cell>
    <nut-cell
      title="当前页面信息"
      :sub-title="$filters.stringify(pageInstance)"
    ></nut-cell>
  </demo-content>
</template>

<script setup lang="ts">
import { usePage } from 'taro-hooks';

const [stackLength, { pageInstance = {} }] = usePage();
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️

FAQ

• 请勿直接修改获取到的页面栈, 会导致页面状态或路由错误

• useScope的selector参数请配合CustomWrapper使用(相关传送门)