前言

• 好，經(jīng)過上個(gè)章節(jié)的介紹完畢之后，了解了一下 uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期
• 那么了解完了uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期之后，這篇文章來給大家介紹一下 uni-app-路由

• 前面我還說過，除了有應(yīng)用程序的生命周期和頁面的生命周期以外，其實(shí)還有組件的生命周期，組件的生命周期我就不介紹了
• 為什么呢？因?yàn)?UniApp 當(dāng)中組件的生命周期和 Vue 的組件的生命周期是一樣的，所以這里就不再介紹了

• 那么我們不管三七二十一，先來新建一個(gè)項(xiàng)目

搭建演示環(huán)境

創(chuàng)建一個(gè)全新的項(xiàng)目：

然后在配置一下，微信小程序的 AppId，直接去之前的項(xiàng)目中拷貝一下即可，找到之前項(xiàng)目的 manifest.json 文件，然后選擇微信小程序配置，復(fù)制一下即可。

這里我創(chuàng)建三個(gè)頁面來進(jìn)行演示，分別是 one, two, three，然后在 pages.json 文件中配置一下，我直接將對應(yīng)的代碼粘貼在下方快速搭建起來，主要是看 UniApp 中路由的知識點(diǎn)。

one 頁面：

<template>
	<view>
		<text>one</text>
	</view>
</template>

two 頁面：

<template>
	<view>
		<text>two</text>
	</view>
</template>

three 頁面：

<template>
	<view>
		<text>three</text>
	</view>
</template>

首頁：

<template>
	<view>
		<text>首頁</text>
	</view>
</template>

pages.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"
    }]
  }
}

• 經(jīng)過如上的這么一頓操作之后，就可以搭建完畢運(yùn)行環(huán)境，與編碼環(huán)境
• 接下來就可以開始進(jìn)行介紹 uni-app-路由內(nèi)容了

步入正題

什么是路由呢？路由就是頁面之間的跳轉(zhuǎn)，比如說我們現(xiàn)在在首頁，然后我們點(diǎn)擊了一個(gè)按鈕，然后跳轉(zhuǎn)到了 one 頁面，這個(gè)過程就是路由

那么在 UniApp 中怎么進(jìn)行路由跳轉(zhuǎn)呢？這個(gè)時(shí)候就需要我們打開官方文檔進(jìn)行查閱了，官方文檔地址：https://uniapp.dcloud.net.cn/tutorial/page.html#路由

經(jīng)官方介紹，uni-app 有兩種頁面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)。

首先我們來看 調(diào)用API跳轉(zhuǎn)。

調(diào)用API跳轉(zhuǎn)

打開調(diào)用API跳轉(zhuǎn)官方文檔：https://uniapp.dcloud.net.cn/api/router.html#

這里我介紹一下常用的幾個(gè) API：

1. uni.navigateTo(OBJECT)：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用uni.navigateBack可以返回到原頁面，跳轉(zhuǎn)到的目標(biāo)頁面會(huì)有返回按鈕。

更改 index.vue 文件，添加一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到 one 頁面：

<template>
	<view>
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one'
				})
			}
		}
	}
</script>

當(dāng)我運(yùn)行測試發(fā)現(xiàn)，控制臺報(bào)錯(cuò)了，錯(cuò)誤信息是 navigateTo:fail can not navigateTo a tabbar page ，意思是說不能跳轉(zhuǎn)到 tabBar 頁面，我們需要將 pages.json 文件中的 tabBar 配置去掉，為什么要去掉呢？因?yàn)?tabBar 頁面是底部導(dǎo)航欄，是不能跳轉(zhuǎn)的，所以我們需要將其去掉，然后再次運(yùn)行測試，發(fā)現(xiàn)可以正常跳轉(zhuǎn)了。

這里我將 one/two 的 tabBar 配置去掉，然后再次運(yùn)行測試，發(fā)現(xiàn)可以正常跳轉(zhuǎn)了。

2. uni.redirectTo(OBJECT)：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。是沒有返回按鈕的。

更改 index.vue 文件，添加一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到 two 頁面：

<template>
  <view>
    <button @click="onJumpOne">redirectTo</button>
  </view>
</template>

<script>
  export default {
    methods: {
      onJumpOne() {
        uni.redirectTo({
          url: '/pages/two/two'
        })
      }
    }
  }
</script>

3. uni.switchTab(OBJECT)：跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。

更改 index.vue 文件，添加一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到 three 頁面：

<template>
	<view>
		<button @click="onJumpOne">switchTab</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.switchTab({
					url: '/pages/three/three'
				})
			}
		}
	}
</script>

到這，通過調(diào)用 API 的方式，我們就可以實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)了。大概就先介紹這么多，接下來我們來看看第二種方式。

使用navigator組件跳轉(zhuǎn)

打開官方文檔：https://uniapp.dcloud.net.cn/component/navigator.html#

廢話不多說，直接將上面的代碼轉(zhuǎn)換為 navigator 組件的方式，navigator 中最主要是屬性就是 url 與 open-type。

• url：跳轉(zhuǎn)的頁面路徑，可以是絕對路徑，也可以是相對路徑
• open-type：跳轉(zhuǎn)方式

更改 index.vue 文件，添加三個(gè)按鈕，分別跳轉(zhuǎn)到 one、two、three 頁面：

<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>

最后

大家好我是 BNTang, 一個(gè)熱愛分享的技術(shù)的開發(fā)者，如果大家覺得我的文章對你有幫助的話，可以關(guān)注我的公眾號 JavaBoyL，我會(huì)在公眾號中分享一些IT技術(shù)和一些個(gè)人的見解，謝謝大家的支持。

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。