<h2 id="hcb9dacb773">結論</h2><p>から申しますと、<strong>動的ルートマッチングができる＋他データの受け渡しもできる</strong>やり方で辿り着いたのは以下でした。</p><pre><code>// App.vue

&lt;template&gt;
  &lt;div @click="increment"&gt;できた&lt;/div&gt;
&lt;/template&gt;

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

const routes = [
  {
    path: /About:id,
    name: "About",
    component: About,
    props: (route) =&gt; ({
      id: Number(route.params.id),
      sendData: String(route.params.sendData),
    }),
  },
];</code></pre><h2 id="hc8dec372f1">どこで躓いたのか</h2><p>動的ルートマッチングのやり方は調べればすぐに出てきましたが、加えて<strong>他データをURLに記載せずに受け渡す</strong>やり方になかなか辿り着けていませんでした。過去の僕が採用していた方法は以下です。</p><pre><code>// App.vue

&lt;router-link :to="{name:'About', params:{ sendData: "test" }}"&gt;
  テスト
&lt;router-link&gt;</code></pre><p>この要領ならば動的ルートマッチング方式に変更してもいけるやろ！と思い、この度適当に書いたのがこちらでした。</p><pre><code>// App.vue

&lt;router-link :to="{path: `/${動的なデータ}`, name:'About', params:{ sendData: "test" }}")&gt;
  できない…
&lt;router-link&gt;</code></pre><p>できませんでした。<br>結果、辿り着いたのが初めに記載した方法です。<br>他にもっといい手段があるんだろうか、、</p>

【Vue.js】動的ルートマッチングで他データの受け渡しもしようとしたら嵌った

<p>Vueが好きすぎてしがみついている亡霊です。<br>まだまだこの家に棲みたいので、棲家を快適にするために毎回行なっている設定をまとめていきます。<br>あわよくばVueに興味を持っている、新しいお客様の敷居を下げられることを願って。</p><h2 id="hed900658dc">環境</h2><ul><li><strong>vue@2.6.14</strong></li><li><strong>@vue/cli 4.3.0</strong></li><li><strong>vue router 3.1.6</strong></li></ul><p>上記がインストールできている状態で進んでいきます。<br>3xにしていなかったことに今更気がつきました。そちらでも動くとは思います。<br>そういえば、Vue CLIに新しいバージョンが出ていましたね（22/2/19）。</p><h2 id="h2e6a662ca8">ついでにバージョンの確認方法</h2><h3 id="h736be96ef7">Vue</h3><pre><code>npm list -g vue</code></pre><h3 id="he582b4a301">Vue CLI</h3><pre><code>vue --version</code></pre><p>参考サイト：https://qiita.com/Sinhalite/items/64731c0a84cadb516a24</p><h2 id="hcba6546b1b">Pugの導入</h2><pre><code>yarn add pug pug-plain-loader
// App.vue

&lt;template lang="pug"&gt; // langを指定
div#app
&lt;/template&gt;</code></pre><p>参考サイト：https://kic-yuuki.hatenablog.com/entry/2019/01/27/155050</p><h2 id="h47475b64a5">vue-headの導入</h2><pre><code>npm i vue-head --save
// index.js

import VueHead from 'vue-head';
Vue.use(VueHead);
// App.vue

export default {
  head: {
    title: {
      inner: "子ページのタイトル",
      separator: "｜",
      complement: "ページ自体のタイトル",
    },
    meta: [
      { name: "description", content: "descriptionの内容" },
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1.0,user-scalable=no",
      },
      { charset: "utf-8" },
      { property: "og:type", content: "website" },
    ],
    link: [
      { rel: "stylesheet", href: "外部CSSファイル" },
      { rel: "shortcut icon", href: "ファビコン" },
    ],
    script: [
      { type: "text/javascript", src: "外部JSファイル", async: true },
      // body内に挿入したい場合は「body: true」を入れる
      // {
      //   type: "text/javascript",
      //   src: "外部jsファイル",
      //   async: true,
      //   body: true,
      // },
    ],
  },
};</code></pre><p>ページごとに指定する必要がある場合、App.vueでは記載せずそれぞれに記載します。</p><pre><code>// Example.vue

export default {
  head: {
    title() {
      return {
        inner: "子ページのタイトル",
        separator: "｜",
        complement: "ページ全体のタイトル",
      };
    },
  },
}</code></pre><p>参考サイト：https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/21/104519</p><h2 id="hc6ab2c4483">Mixin</h2><p>src<br>├assets<br>├components<br>・<br>・<br>・<br><strong>├mixins</strong><br>・<strong>└Mixin.vue</strong><br>・<br>・<br>└<br>上記の箇所にファイルを作成する。</p><pre><code>// Mixin.vue

&lt;script&gt;
export default {
  data() {
    return {
      example: "example",
    };
  },
};
&lt;/script&gt;</code></pre><p>使いたいファイルでimport。</p><pre><code>// App.vue

&lt;script&gt;
import Mixin from "@/mixins/Mixin.vue";
export default {
  name: "App",
  mixins: [Mixin],
  mounted() {
    console.log(this.example);
  },
}</code></pre><p>僕は画像を全て絶対パスで書き出しているので、mixinにURLを格納するのは必須の作業です。</p><h2 id="h16d69ad3fe">buildの準備</h2><h3 id="h14639d09e7">vue.config.jsの設定</h3><p>これはVue CLI v5以前だとデフォルトでは入っていないファイルです。→新規作成し、ディレクトリの直下に配置します。<br>また、v5でもこの記載はないので追加する必要があると思われます。（未検証）</p><pre><code>// vue.config.js

module.exports = {
  publicPath: "./",
};</code></pre><h3 id="h239fb65573">routeの定数化</h3><p>localhostで確認するときは/で問題ないのに、buildするためにサーバーに準じた文字列に毎度変更するのは面倒。<br>ということで定数にします。</p><pre><code>// index.js

import Home from "../views/Home.vue";

const route = "/example/";
// localhostでは/のみ

const routes = [
  {
    path: `${route}`,
    name: "Home",
    component: Home,
  },
];</code></pre><p>これで編集・buildがしやすくなりました。</p>

【Vue.js】動的ルートマッチングで他データの受け渡しもしようとしたら嵌った

【下準備】これを読んでVue.jsを書き始めよう