詳解uniapp和vue在路由方面的不同和聯繫

Uniapp 和 Vue 在路由方面有相似之處，因為 Uniapp 是基於 Vue 的。Uniapp 的路由系統是通過 Vue Router 實現的，因此兩者有許多相同的概念和 API。相同點：都支持基於 URL 的路由；都可以使用嵌套路由來管理多個頁面之間的關係；都支持路由參數和查詢參數的 ...

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