Vue: 同一コンポーネント内にVueRouterに関係する要素が無いと$route内は参照出来ない物なのでしょうか

＊プログラミング初心者なので根本的な部分からずれている場合があります。すみません。

知りたい事

VueRouterに関しての質問です。
同一コンポーネント内にVueRouterに関係する要素(RouterViewコンポーネントやrouter-link等)
が無いと$route内は参照出来ない物なのでしょうか。
もし参照出来る場合、そのやり方とサンプルコード等載せて頂けると嬉しいです。

現在やっている事と実現したい事

現在画面遷移に感知して特定のメソッドを発火させる処理を書いているのですが,
同一コンポーネント内にVueRouterに関係する要素が存在する場合のみでしか処理が動きません。
出来ればVueRouterに関係する要素が無くても$route内を参照出来る様にしたいです。

何故出来そうだと思っているのか

画面遷移情報は必ずしも同一コンポーネントが関わらないといけないと言う事は無さそうと漠然と感じており、
尚且つ自分が具体的なやり方を知らない・浮かばないだけではと思っている為です。

今のままだとやりたい事が伝わりにくいと思うので、コードを載せます。

例(同一コンポーネント内にVueRouterに関係する要素が存在して、画面遷移に感知して特定のメソッドを発火する場合)

vue
1//router.js
2import Vue from "vue";
3import VueRouter from "vue-router";
4
5Vue.use(VueRouter);
6
7const routes = [
8  {
9    path: "/test1",
10    component: () => import("../components/test1")
11  },
12  {
13    path: "/test2",
14    component: () => import("../components/test2")
15  }
16];
17
18const router = new VueRouter({
19  routes
20});
21
22export default router;

vue
1//App.vue
2<template>
3  //VueRouterに関係する要素
4  <RouterView />
5</template>
6<script>
7export default {
8  methods: {
9    check() {
10      console.log("画面遷移確認");
11    },
12  },
13  watch: {
14    $route: "check",
15  },
16};
17</script>

この場合だと"/test1"から"/test2"に移動すると
"画面遷移確認"と出力されます

理想(同一コンポーネント内にVueRouterに関係する要素が存在しない)

vue
1//router.js
2import Vue from "vue";
3import VueRouter from "vue-router";
4
5Vue.use(VueRouter);
6
7const routes = [
8  {
9    path: "/test1",
10    component: () => import("../components/test1")
11  },
12  {
13    path: "/test2",
14    component: () => import("../components/test2")
15  }
16];
17
18const router = new VueRouter({
19  routes
20});
21
22export default router;

vue
1//App.vue
2<template>
3  <RouterView />
4</template>

vue
1//test2.vue
2<template>
3  //VueRouterに関係する要素なし
4  <div>テスト2画面です</div>
5</template>
6<script>
7export default {
8  methods: {
9    check() {
10      //この場合でも出力される様にしたい。(実際は出力されない)
11      console.log("画面遷移確認");
12    },
13  },
14  watch: {
15    $route: "check",
16  },
17};
18</script>

この場合の様にVueRouterに関係する要素が無いコンポーネントでも$routeを参照して"/test1"から"/test2"に移動すると
"画面遷移確認"と出力される様にしたいです。

補足情報（FW/ツールのバージョンなど）

Vue: 2.6.11
Vue-router: 3.5.1

環境
CodeSandBox
＊追記:問題が解決したので以前載せていた実行環境のテンプレートのURLは削除させてもらいました。
(実際に使っているGitHubと紐付けしており、アカウント名等が分かる状態なのが少し嫌なので)

正直あまり上手くやりたい事が伝えられた気がしないので、何かあり次第追記させて頂きます。
宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

watchの監視はオブジェクトのネストしたデータ変更までは検知しないのでdeep trueを付与してみてはいかがでしょうか？

vue
1watch: {
2      $route: {
3        handler: function (val, oldVal) {
4          console.log('someObj changed')
5        },
6        deep: true
7      }
8    }

投稿2021/05/31 23:07

m2l

総合スコア318

sdka

2021/06/01 08:07 編集

回答ありがとうございます！今回教えて頂いたdeep:trueに関して恥ずかしながら知らなかった為以下の記事を参考に書き直したのち、/test1→/test2へ画面遷移してみましたが"画面遷移確認"と表示はされなかったです。 (エラーの表示等はありませんでした。書き方に問題があった場合はすみません。) 【Vue】watchプロパティとは？handlerやdeepはなぜ・いつ必要か https://qiita.com/yuta-38/items/ef20d7b9649234ba26ae#%E6%B7%B1%E3%81%84%E9%9A%8E%E5%B1%A4%E3%81%AEwatch 以下書き直したコードです。 (それ以外のファイルは質問時の元と変わりないです。) ```vue //test2.vue <template> <div>テスト2画面です</div> </template> <script> export default { watch: { $route: { handler() { console.log("画面遷移確認"); }, }, deep: true, }, }; </script> ```

sdka

2021/06/01 07:59

===(こちらの方に書いた物は少しだけ気になった事です。返信が面倒な場合は無視して頂いて大丈夫です)=== それと気になった事があるのですが、ライブラリ側で予め定義されているプロパティ(今回の場合でしたら$route等)をwatchで監視する場合も「ネストしたデータ変更までは検知しない」というルールを意識しないといけない物なのでしょうか。 (以下質問内に載せた例(同一コンポーネント内にVueRouterに関係する要素が存在して、画面遷移に感知して特定のメソッドを発火する場合) の一部コードです。) ```vue //App.vue <template> //VueRouterに関係する要素 <RouterView /> </template> <script> export default { methods: { check() { console.log("画面遷移確認"); }, }, watch: { $route: "check", }, }; </script> ``` こちらのパターンだと/test1→/test2へ動作した場合、コンソール内で"画面遷移確認"と出力されるのですがいくつかのサイトで見た場合、以下のコードの様に予めコンポーネント内に用意したdataを想定した場合が多かったのでもし何か知っていたら教えてもらえると嬉しいです。 ```vue //sample <script> export default { data () { return { someObj: { a: 'obj-a', b: 'obj-b', c: 'obj-c' } } }, watch: { someObj: { handler: function (val, oldVal) { console.log('someObj changed') }, deep: true } } } </script> ```

m2l

2021/06/01 08:14

ご返信ありがとうございます。そうなんですね。。遷移後ですと既にwatchに入る前に$routeが書き換わってしまってるので確かに検知できないですね。 $routeやthisをconsole.logで中身見ていただくとわかるのですがオブジェクトがネストされている形で格納されておりますので、そちらが問題なのかなと思い、記載させていただきました。ちなみにwatchではなく、beforeRouteEnterの様な形で検知することもできますが、watchを使いたい形でしょうか？

sdka

2021/06/01 08:53

いえ、VueRouterに関係する要素を用意せずに画面遷移を確認→処理を発火という流れが実現できれば大丈夫なのでwatch自体に拘りは無いです！教えて頂いたbeforeRouteEnterを元に書いてみた所理想でした「同一コンポーネント内にVueRouterに関係する要素が存在しなくても"画面遷移確認"を出力させる」事が出来ました！ありがとうございます！ ```vue //test2.vue <template> <div>テスト2画面です</div> </template> <script> export default { beforeRouteEnter(to, from) { if (to !== from) { console.log("画面遷移確認"); } }, }; </script> ```

sdka

2021/06/01 08:54 編集

問題が解決したのに図々しいとは思うのですが、最後に一つだけ聞きたい事があります。同一コンポーネント内にVueRouterに関係する要素が存在する・しないで何故遷移後の$routeの検知に影響が出るのかという点で何か知っている事は無いでしょうか..? 恐らく$routeをconsole.logで見ながら<RouterView />を取り外しすれば何か分かると思うのですが、出来れば参考になりそうな記事等やヒントになりそうな事を教えてもらえると本当にありがたいです。

m2l

2021/06/01 09:51 編集

解決できて良かったです！答えになっていれば幸いでございますが、vueにはライフサイクルというものがございまして、コンポーネント（インスタンス）が生成後の処理のタイミングが決められているため、watchの処理が値が変更後に走ってしまい、検知できないのかなと思います。（watchのオプションで確か変更可能ではあった気がしますが、、その辺りは調べて頂けますと幸いでございます。） https://jp.vuejs.org/v2/guide/instance.html

sdka

2021/06/01 10:08 編集

追加の質問にも丁寧に回答して下さり本当にありがとうございます..! つまりVueRouterに関係する要素が存在する・しないは関係無く,vueのライフサイクルという物に基づいたインスタンス生成後の処理タイミングが偶然重なってこんがらがった認識になってしまっているのではという事でしょうか? ライフサイクルについてあまり良く知らなかったのでこれを機に深堀りしてみようと思います！色々と解説して下さり本当にありがとうございました！

行動規範の内容に同意します