Vue學習之——跳轉路由

前情回顧

當我們進行點擊修改時，會進行跳轉到修改頁面，為了完成回顯數據（根據對應id查找），我們需要攜帶對應選擇中的id跳轉到修改頁面，讓其進行查找回顯

學習useRoute和useRouter（來自Vue-router官方庫）

useRoute（用于接收參數）

這個鉤子用于返回當前路由的信息對象，通常用于接收路由參數。通過useRoute，你可以訪問到如路由的name、path、params、query等屬性。這相當于在Vue組件模板中使用$route。

useRouter（用于跳轉路由）

該鉤子返回當前的路由實例，常用于實現路由跳轉等操作。使用useRouter，你可以進行如路由跳轉（router.push()）、路由后退（router.go(-1)）等全局路由操作。這相當于在Vue組件模板中使用$router。

使用（實戰練習：攜帶參數跳轉修改頁面）

1.先在List展示表格的頁面導入useRouter

import { useRouter } from "vue-router";

2.聲明router

const router = useRouter();

3.寫修改按鈕的點擊事件

3.1 template中通過插槽將對應行的數據接收為參數傳給點擊事件

<template #default="scope"><el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
</template>

3.2 點擊事件進行傳參并跳轉路由

其中name是跳轉頁面的名字（你在router里的index.ts中路由配置的name）
query是要傳遞的參數，比如回顯需要根據id查詢對應的內容

const handleUpdate = (row: any) => {router.push({name: "category-edit",query: { id: row.id },});
};

4.在跳轉過來的Edit頁面導入useRoute

import { useRoute} from "vue-route";

5.聲明route

const route = useRoute();

6.使用參數

我在onMounted中直接將路由攜帶的參數直接賦值給了我要直接通過id查詢對應的內容的參數

onMounted(() => {formData.id = Number(route.query.id);callCategoryApi();
});

其中formData是我要查詢時傳遞的參數，賦值過后，callCategoryApi()是我要調用的查詢數據的接口，這樣有了id就可以把對應內容回顯出來了。

結果