問題二三四-有關vue-router的ts問題（Vue）

tags: 問題二三四

對於使用vue ts新手的我，踩雷踩到累呀！
這次是踩到vue router的部分。

問題

在一般設置vue router的時候，放置routes這個資料會將所有頁面相關資訊包在裡面，而這個型別叫做RouteRecordRaw

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../view/Home.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
];

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

export default router;

假如我們想在每一頁進入的時候做一個console.log的動作，就會增加一個叫做beforeEnter的方法

此時會有機會ts報錯，因為我在另一個專案理會是正常使用
這邊要是有報錯

原本寫法是

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../view/Home.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    beforeEnter: () => console.log('this is home page'),
  },
];

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


export default router;

其實是因為beforeEnter的型別要是call back會是一boolean所以這邊需要讓他是一個void

beforeEnter: () => {console.log('this is home page')}

這樣就可以解決這個錯誤了！