前言

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

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

• 那么我們不管三七二十一，先來新建一個項目

搭建演示環境

創建一個全新的項目：

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

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

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

• 經過如上的這么一頓操作之后，就可以搭建完畢運行環境，與編碼環境
• 接下來就可以開始進行介紹 uni-app-路由內容了

步入正題

什么是路由呢？路由就是頁面之間的跳轉，比如說我們現在在首頁，然后我們點擊了一個按鈕，然后跳轉到了 one 頁面，這個過程就是路由

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

經官方介紹，uni-app 有兩種頁面路由跳轉方式：使用navigator組件跳轉、調用API跳轉。

首先我們來看 調用API跳轉。

調用API跳轉

打開調用API跳轉官方文檔：https://uniapp.dcloud.net.cn/api/router.html#

這里我介紹一下常用的幾個 API：

1. uni.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面，跳轉到的目標頁面會有返回按鈕。

更改 index.vue 文件，添加一個按鈕，點擊按鈕跳轉到 one 頁面：

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

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

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

這里我將 one/two 的 tabBar 配置去掉，然后再次運行測試，發現可以正常跳轉了。

2. uni.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。是沒有返回按鈕的。

更改 index.vue 文件，添加一個按鈕，點擊按鈕跳轉到 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)：跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。

更改 index.vue 文件，添加一個按鈕，點擊按鈕跳轉到 three 頁面：

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

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

到這，通過調用 API 的方式，我們就可以實現頁面之間的跳轉了。大概就先介紹這么多，接下來我們來看看第二種方式。

使用navigator組件跳轉

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

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

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

更改 index.vue 文件，添加三個按鈕，分別跳轉到 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, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支持。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。