【UniApp】-uni-app-路由

看着说 發表於 2023-12-16 11:17:00

<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231203181603979-574248008.png" alt="" loading="lazy"></p>
<h1 id="前言">前言</h1>
<ul>
<li>好，经过上个章节的介绍完毕之后，了解了一下 uni-app-CompositionAPI应用生命周期和页面生命周期</li>
<li>那么了解完了uni-app-CompositionAPI应用生命周期和页面生命周期之后，这篇文章来给大家介绍一下 uni-app-路由</li>
</ul>
<blockquote>
<ul>
<li>前面我还说过，除了有应用程序的生命周期和页面的生命周期以外，其实还有组件的生命周期，组件的生命周期我就不介绍了</li>
<li>为什么呢？因为 UniApp 当中组件的生命周期和 Vue 的组件的生命周期是一样的，所以这里就不再介绍了</li>
</ul>
</blockquote>
<ul>
<li>那么我们不管三七二十一，先来新建一个项目</li>
</ul>
<h1 id="搭建演示环境">搭建演示环境</h1>
<p>创建一个全新的项目：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210120045570-1420917355.png" alt="" loading="lazy"></p>
<p>然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 <code>manifest.json</code> 文件，然后选择微信小程序配置，复制一下即可。</p>
<p>这里我创建三个页面来进行演示，分别是 one, two, three，然后在 <code>pages.json</code> 文件中配置一下，我直接将对应的代码粘贴在下方快速搭建起来，主要是看 UniApp 中路由的知识点。</p>
<p>one 页面：</p>
<pre><code class="language-vue"><template>
<view>
<text>one</text>
</view>
</template>
</code></pre>
<p>two 页面：</p>
<pre><code class="language-vue"><template>
<view>
<text>two</text>
</view>
</template>
</code></pre>
<p>three 页面：</p>
<pre><code class="language-vue"><template>
<view>
<text>three</text>
</view>
</template>
</code></pre>
<p>首页：</p>
<pre><code class="language-vue"><template>
<view>
<text>首页</text>
</view>
</template>
</code></pre>
<p>pages.json 配置：</p>
<pre><code class="language-json">{
"pages": [{
"path": "pages/index/index",
"style": {
   "navigationBarTitleText": "首页",
   "enablePullDownRefresh": false
}
},
{
   "path": "pages/one/one",
   "style": {
   "navigationBarTitleText": "one",
   "enablePullDownRefresh": false
   }
},
{
   "path": "pages/two/two",
   "style": {
   "navigationBarTitleText": "two",
   "enablePullDownRefresh": false
   }
},
{
   "path": "pages/three/three",
   "style": {
   "navigationBarTitleText": "three",
   "enablePullDownRefresh": false
   }
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
   "pagePath": "pages/index/index",
   "text": "首页"
}, {
   "pagePath": "pages/one/one",
   "text": "one"
}, {
   "pagePath": "pages/two/two",
   "text": "two"
}, {
   "pagePath": "pages/three/three",
   "text": "three"
}]
}
}
</code></pre>
<ul>
<li>经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境</li>
<li>接下来就可以开始进行介绍 uni-app-路由内容了</li>
</ul>
<h1 id="步入正题">步入正题</h1>
<blockquote>
<p>什么是路由呢？路由就是页面之间的跳转，比如说我们现在在首页，然后我们点击了一个按钮，然后跳转到了 one 页面，这个过程就是路由</p>
</blockquote>
<p>那么在 UniApp 中怎么进行路由跳转呢？这个时候就需要我们打开官方文档进行查阅了，官方文档地址：https://uniapp.dcloud.net.cn/tutorial/page.html#路由</p>
<p>经官方介绍，uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。</p>
<p>首先我们来看 <code>调用API跳转</code>。</p>
<h2 id="调用api跳转">调用API跳转</h2>
<p>打开调用API跳转官方文档：https://uniapp.dcloud.net.cn/api/router.html#</p>
<p>这里我介绍一下常用的几个 API：</p>
<ol>
<li>uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面，跳转到的目标页面会有返回按钮。</li>
</ol>
<p>更改 index.vue 文件，添加一个按钮，点击按钮跳转到 one 页面：</p>
<pre><code class="language-vue"><template>
<view>
<button @click="onJumpOne">navigateTo</button>
</view>
</template>

<script>
export default {
methods: {
onJumpOne() {
uni.navigateTo({
url: '/pages/one/one'
})
}
}
}
</script>
</code></pre>
<p>当我运行测试发现，控制台报错了，错误信息是 <code>navigateTo:fail can not navigateTo a tabbar page</code> ，意思是说不能跳转到 tabBar 页面，我们需要将 pages.json 文件中的 tabBar 配置去掉，为什么要去掉呢？因为 tabBar 页面是底部导航栏，是不能跳转的，所以我们需要将其去掉，然后再次运行测试，发现可以正常跳转了。</p>
<p>这里我将 one/two 的 tabBar 配置去掉，然后再次运行测试，发现可以正常跳转了。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210152916934-2079282371.gif" alt="" loading="lazy"></p>
<ol start="2">
<li>uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。是没有返回按钮的。</li>
</ol>
<p>更改 index.vue 文件，添加一个按钮，点击按钮跳转到 two 页面：</p>
<pre><code class="language-vue"><template>
<view>
<button @click="onJumpOne">redirectTo</button>
</view>
</template>

<script>
export default {
methods: {
   onJumpOne() {
   uni.redirectTo({
      url: '/pages/two/two'
   })
   }
}
}
</script>
</code></pre>
<ol start="3">
<li>uni.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。</li>
</ol>
<p>更改 index.vue 文件，添加一个按钮，点击按钮跳转到 three 页面：</p>
<pre><code class="language-vue"><template>
<view>
<button @click="onJumpOne">switchTab</button>
</view>
</template>

<script>
export default {
methods: {
onJumpOne() {
uni.switchTab({
url: '/pages/three/three'
})
}
}
}
</script>
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210153348593-898338258.gif" alt="" loading="lazy"></p>
<p>到这，通过调用 API 的方式，我们就可以实现页面之间的跳转了。大概就先介绍这么多，接下来我们来看看第二种方式。</p>
<h2 id="使用navigator组件跳转">使用navigator组件跳转</h2>
<p>打开官方文档：https://uniapp.dcloud.net.cn/component/navigator.html#</p>
<p>废话不多说，直接将上面的代码转换为 navigator 组件的方式，navigator 中最主要是属性就是 url 与 open-type。</p>
<ul>
<li>url：跳转的页面路径，可以是绝对路径，也可以是相对路径</li>
<li>open-type：跳转方式</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210154211282-33750711.png" alt="" loading="lazy"></p>
<p>更改 index.vue 文件，添加三个按钮，分别跳转到 one、two、three 页面：</p>
<pre><code class="language-vue"><template>
<view>
<navigator url="/pages/one/one" open-type="navigate">
<button type="default">navigate</button>
</navigator>
<navigator url="/pages/two/two" open-type="redirect">
<button type="default">redirect</button>
</navigator>
<navigator url="/pages/three/three" open-type="switchTab">
<button type="default">switchTab</button>
</navigator>
</view>
</template>
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210154318565-1689791142.gif" alt="" loading="lazy"></p>
<h1 id="最后">最后</h1>
<blockquote>
<p>大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 <code>JavaBoyL</code>，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/BNTang/p/17904618.html

頁: [1]

琼殿技术论坛's Archiver

【UniApp】-uni-app-路由