vue3路由傳參數ts寫法-前端問答-PHP中文網

vue3路由傳參數ts寫法

WBOY

發布： 2023-05-25 13:09:39

原創

1455 人瀏覽過

Vue3是目前流行的前端框架之一，有著優秀的組件化和響應式特性。而vue-router則是Vue官方提供的路由插件，使得我們可以在前端應用中實現頁面之間的跳轉，實現單一頁面應用(SPA)。

在開發中，我們有時需要在路由之間傳遞參數，例如從一個頁面跳到另一個頁面並顯示對應的資料。接下來，我們將介紹如何在Vue3中透過vue-router傳遞參數，並結合TypeScript的類型檢查，避免因錯誤傳參導致的運行時異常。

安裝vue-router

在使用vue-router實作路由跳轉之前，我們需要先安裝vue-router：

npm install vue-router@next

登入後複製

定義路由

#接下來，我們需要在Vue應用中定義路由。在Vue3中，路由的定義方式與Vue2有所不同。以下是一個簡單的範例程式碼：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    props: true
  },
  {
    path: '/page/:id',
    name: 'Page',
    component: Page,
    props: true
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

登入後複製

其中，createRouter和createWebHistory是由Vue3提供的工廠方法，用於建立路由實例和歷史記錄管理器。

在定義路由時，我們需要指定路徑、路由名稱和元件。此外，我們也可以透過設定props: true，將路徑參數當作元件屬性傳遞，方便元件接收參數。

路由跳轉

下面是一個基本的路由跳轉範例程式碼：

import router from '@/router';

router.push({ name: 'Page', params: { id: '1' } });

登入後複製

在上述程式碼中，我們使用router.push方法進行路由跳轉。其中，name為跳轉的路由名稱，params為傳遞的參數對象，其內部鍵與路由路徑中的參數名稱相對應。

接收參數

最後，我們需要在被跳轉的頁面元件中接收參數，並進行類型檢查。

這裡有兩種方法可以傳遞參數。一種是透過props，另一種是透過$route。我們分別來看這兩種傳參方法的具體實作：

透過props 傳參

在路由定義時，我們可以透過props選項將路由參數作為組件的屬性傳遞。以下是一個範例程式碼：

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

登入後複製

在元件中，我們可以直接宣告這些屬性，並透過TypeScript來進行類型檢查。下面是一個範例程式碼：

<script lang="ts">
interface Props {
  id: string;
}

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    /* ... */
  }
};
</script>

登入後複製

這裡我們使用了Vue3新引入的setup函數，用來取代Vue2中的data、computed、methods等鉤子函數。透過props對象，我們可以取得到傳遞過來的參數，並進行型別檢查。

透過 $route 傳參

另一種傳遞參數的方式是透過$route。在這種方式下，我們可以透過$route.params物件來取得路由參數。以下是一個範例程式碼：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const id = $route.params.id;
    /* ... */
  }
});
</script>

登入後複製

要注意的是，在使用$route時，我們需要透過靜態類型導入RouteLocationNormalized和RouteParams等路由相關類型，並對參數進行類型檢查。

import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';

export default defineComponent({
  setup() {
    const route = $route as RouteLocationNormalized & { params: RouteParams };
    const id = route.params.id;
    /* ... */
  }
});

登入後複製