結論

から申しますと、動的ルートマッチングができる＋他データの受け渡しもできるやり方で辿り着いたのは以下でした。

// App.vue

<template>
  <div @click="increment">できた</div>
</template>

<script>
export default {
  //略
  methods:{
    increment(){
      this.$router.push({
        name: "About",
        params: {
          id: 0,
          sendData: "test",
        },
        props: true,
      });
    }
  }
}
</script>
// index.js

const routes = [
  {
    path: /About:id,
    name: "About",
    component: About,
    props: (route) => ({
      id: Number(route.params.id),
      sendData: String(route.params.sendData),
    }),
  },
];

どこで躓いたのか

動的ルートマッチングのやり方は調べればすぐに出てきましたが、加えて他データをURLに記載せずに受け渡すやり方になかなか辿り着けていませんでした。過去の僕が採用していた方法は以下です。

// App.vue

<router-link :to="{name:'About', params:{ sendData: "test" }}">
  テスト
<router-link>

この要領ならば動的ルートマッチング方式に変更してもいけるやろ！と思い、この度適当に書いたのがこちらでした。

// App.vue

<router-link :to="{path: `/${動的なデータ}`, name:'About', params:{ sendData: "test" }}")>
  できない…
<router-link>

できませんでした。
結果、辿り着いたのが初めに記載した方法です。
他にもっといい手段があるんだろうか、、