詳解uniapp和vue在路由方面的不同和聯系-有解無憂

Uniapp 和 Vue 在路由方面有相似之處，因為 Uniapp 是基于 Vue 的，Uniapp 的路由系統是通過 Vue Router 實作的，因此兩者有許多相同的概念和 API，

相同點：

都支持基于 URL 的路由；
都可以使用嵌套路由來管理多個頁面之間的關系；
都支持路由引數和查詢引數的傳遞；
都支持路由守衛（beforeEach、beforeEnter、beforeLeave）等功能，

不同點：

Vue Router 是針對 Web 應用開發的路由庫，而 Uniapp 是為多個平臺（包括小程式和 H5）開發的跨端框架，因此，Uniapp 的路由系統需要考慮不同平臺的差異，例如小程式中沒有瀏覽器的歷史記錄和前進后退功能；
在使用 Uniapp 的時候，不需要手動配置路由，而是通過撰寫 pages.json 檔案來配置頁面路徑和樣式等資訊，這一點與 Vue Router 的使用方式略有不同；
Uniapp 的路由跳轉方法有些不同，例如 navigateTo、redirectTo、switchTab、reLaunch 等方法，這些方法都是針對不同場景的不同跳轉方式，
因此，Uniapp 和 Vue 在路由方面有相似之處，但是由于 Uniapp 的跨端特性和不同平臺的差異，它們在具體實作和使用方式上也有些不同，

一. Uniapp路由的使用方式：
Uniapp 的路由使用方法分為兩部分，一是在 pages.json 檔案中配置頁面路徑和樣式等資訊，二是通過 uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch 等方法進行頁面跳轉，下面詳細介紹一下這兩部分的內容，

配置頁面路徑和樣式
在 Uniapp 中，我們可以在 pages.json 檔案中配置頁面路徑和樣式等資訊，這個檔案默認位于專案的根目錄下，它是一個 JSON 格式的組態檔，用于描述所有頁面的路徑、樣式、配置等資訊，例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "詳情頁"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "static/tab-bar/home.png",
        "selectedIconPath": "static/tab-bar/home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tab-bar/mine.png",
        "selectedIconPath": "static/tab-bar/mine-selected.png"
      }
    ]
  }
}

上面的代碼片段中，我們定義了兩個頁面，分別是首頁和詳情頁，它們的路徑分別是 pages/index/index 和 pages/detail/detail，同時還定義了這兩個頁面的導航欄標題，另外，我們還定義了一個名為 tabBar 的物件，表示底部導航欄的樣式和配置資訊，這個物件中包含一個名為 list 的陣列，陣列中的每個物件表示一個底部導航欄項，

跳轉頁面
在 Uniapp 中，我們可以通過 uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch 等方法進行頁面跳轉，這些方法都是基于頁面路徑進行跳轉的，它們的區別在于跳轉的方式和效果不同，例如：

uni.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，新打開的頁面可以通過 uni.navigateBack 方法回傳到原來的頁面，
uni.redirectTo：關閉當前頁面，跳轉到應用內的某個頁面，新打開的頁面不可以通過 uni.navigateBack 方法回傳到原來的頁面，
uni.switchTab：關閉所有頁面，跳轉到應用內的某個頁面，新打開的頁面是底部導航欄中的一個頁面，
uni.reLaunch：關閉所有頁面，打開應用內的某個頁面，

例如，以下代碼示例演示如何通過 uni.navigateTo 方法跳轉到詳情頁：

// 在 index 頁面中跳轉到詳情頁
uni.navigateTo({
  url: '/pages/detail/detail'
})

上面的代碼片段中，我們通過 uni.navigateTo 方法跳轉到了詳情頁，其中 url 引數表示要跳轉的頁面路徑，這個路徑應該是 pages.json 檔案中定義的頁面路徑，可以是相對路徑或絕對路徑，

另外，如果要在跳轉時傳遞引數，可以在路徑后面加上查詢字串，例如：

// 在 index 頁面中跳轉到詳情頁，并傳遞引數
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

在詳情頁中可以通過 this.$route.query.id 獲取引數值，
除了以上方法之外，還可以使用 uni.navigateBack 方法回傳上一個頁面，例如：

// 在詳情頁中回傳上一個頁面
uni.navigateBack()

上面的代碼片段中，我們呼叫了 uni.navigateBack 方法回傳上一個頁面，

二. vue中路由的使用方法

1. 安裝Vue Router
在使用Vue.js的路由功能之前，需要先安裝Vue Router，可以使用npm或者yarn安裝：

npm install vue-router
# 或者
yarn add vue-router

2. 創建路由
在Vue.js中，我們需要先創建一個路由實體，然后定義路由映射關系，路由實體可以通過Vue Router提供的Vue.use()方法進行創建：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

export default router;

在上述代碼中，我們首先引入了Vue.js和Vue Router模塊，并使用Vue.use()方法注冊Vue Router，接著，我們創建了一個路由實體，并定義了兩個路由映射關系，其中，路由映射關系包括路由路徑(path)、路由名稱(name)和路由組件(component)，

3. 添加路由實體
在創建了路由實體后，我們需要將其添加到Vue.js的根實體中，以便在整個應用程式中使用路由功能，可以在main.js檔案中進行添加：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在上述代碼中，我們首先引入了Vue.js的根組件(App.vue)和路由實體(router)，然后將路由實體作為根實體的一個選項進行添加，

4. 創建路由組件
在定義路由映射關系時，需要指定路由組件，路由組件是一個普通的Vue.js組件，用于渲染對應的路由頁面，可以在components檔案夾下創建路由組件，例如：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

在上述代碼中，我們創建了一個名為About的組件，用于渲染關于頁面，

5. 使用路由
在上述步驟完成后，就可以在Vue.js應用程式中使用路由了，可以在Vue.js組件中使用$route和$router來訪問當前路由資訊和導航功能，例如：

<template>
  <div>
    <h1>{{ $route.name
}}</h1>
<p>Welcome to {{ $route.name }} page</p>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

　　在上述代碼中，我們使用$route.name訪問當前路由名稱，并在頁面中顯示，同時，使用<router-link>標簽實作頁面之間的導航，to屬性用于指定目標路由路徑，除了使用<router-link>標簽進行導航，還可以使用$router.push()方法進行編程式導航，例如：

this.$router.push('/about');

上述代碼用于在當前頁面中進行路由跳轉，進入關于頁面，

6. 使用路由守衛
Vue Router還提供了路由守衛功能，用于在導航程序中進行控制和過濾，可以使用beforeEach()方法實作全域路由守衛，例如：

router.beforeEach((to, from, next) => {
  if (to.name === 'about' && !isAuthenticated) next({ name: 'home' })
  else next()
})

在上述代碼中，我們定義了一個全域路由守衛，用于在進入關于頁面之前進行身份驗證，如果當前用戶沒有登錄，則自動跳轉到主頁，

除了全域路由守衛外，Vue Router還提供了其他幾種路由守衛，例如beforeEnter()、beforeRouteEnter()和beforeRouteLeave()等，用于在特定路由進入或離開時進行控制和過濾，

總之，Uniapp 的路由使用方法與 Vue 的路由使用方法基本相似，都是通過組態檔和方法進行跳轉，只不過在具體實作細節上有些不同，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547695.html

標籤：其他

上一篇：記錄--前端加載超大圖片(100M以上)實作秒開解決方案

下一篇：第三方組件element-ui