uniapp 点击按钮弹出新界面：详细步骤和代码示例

<template>
  <view>
    <button @click='gotoAnotherPage'>跳转到另外一个界面</button>
  </view>
</template>
<script>
export default {
  methods: {
    gotoAnotherPage() {
      uni.navigateTo({
        url: '/pages/anotherPage/anotherPage'
      })
    }
  }
}
</script>
<h2>使用 uniapp 路由跳转功能实现点击按钮弹出新界面</h2>
<p>uniapp 提供了路由跳转功能，可以方便地实现点击按钮弹出另外一个界面。具体步骤如下：</p>
<ol>
<li>
<p>在需要点击的按钮上添加一个点击事件，可以使用 <code>@click</code> 指令绑定一个方法。</p>
</li>
<li>
<p>在该方法中使用 <code>uni.navigateTo()</code> 方法来跳转到另外一个界面，例如：</p>
</li>
</ol>
<pre><code class="language-javascript">uni.navigateTo({
  url: '/pages/anotherPage/anotherPage'
})
</code></pre>
<p>其中 <code>url</code> 参数是需要跳转到的页面路径，可以是相对路径或绝对路径。</p>
<ol start="3">
<li>在另外一个界面中，可以使用 <code>uni.navigateBack()</code> 方法回到上一个界面，例如：</li>
</ol>
<pre><code class="language-javascript">uni.navigateBack({
  delta: 1 // 返回上一级页面
})
</code></pre>
<p>其中 <code>delta</code> 参数表示回退的层数，例如 <code>delta: 2</code> 表示回退到上上级页面。</p>
<h2>完整代码示例</h2>
<pre><code class="language-html">&lt;template&gt;
  &lt;view&gt;
    &lt;button @click='gotoAnotherPage'&gt;跳转到另外一个界面&lt;/button&gt;
  &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  methods: {
    gotoAnotherPage() {
      uni.navigateTo({
        url: '/pages/anotherPage/anotherPage'
      })
    }
  }
}
&lt;/script&gt;
</code></pre>