詳解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 的路由使用方法基本相似，都是通過組態檔和方法進行跳轉，只不過在具體實現細節上有些不同。