### 页面用户指引
1. 用户指引页面仅针对菜单对应的页面（权限控制逻辑与菜单同样）
2. 当前页面浏览指引时：ESC/跳过/完成后，该页面将不再显示指引
#### 使用步骤
1. 从 `@nextop/nextop-mixins` 引入 `pageTour`
2. 配置步骤数据，指定挂载节点
3. 当前页面插入 `` 组件
4. 在需要使用调用指引显示
#### 代码案例
```html
//...
//...
```
### before() UI step functions
如果你需要在某个步骤之前进行 UI 设置工作，您可以在任何/每个步骤中包含一个 `before` 函数。此函数将在 `start/nextStep/previousStep` 呈现之前被调用。该函数必须返回一个 `Promise`。当 `start/nextStep/previousStep` 被触发时调用该函数。当 `Promise` 被拒绝时，它不会移动到下一步或上一步。如果 `Promise` 得到解决，那么它将朝着指定的方向移动。
当您需要在步骤之间更改屏幕上显示的内容时使用它。例如，您可能想要隐藏一组菜单并打开一个屏幕，或者您想要执行异步操作。这在单页应用程序中特别有用。
```js
steps: [
{
target: '#v-step-0', // We're using document.querySelector() under the hood
content: `Discover Vue Tour!`,
before: type => new Promise((resolve, reject) => {
// Time-consuming UI/async operation here
resolve('foo')
})
}
]
```