質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1022閲覧

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

sdka

総合スコア2

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/30 06:17

編集2021/06/02 11:48

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

知りたい事

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と紐付けしており、アカウント名等が分かる状態なのが少し嫌なので)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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のライフサイクルという物に基づいたインスタンス生成後の処理タイミングが偶然重なってこんがらがった認識になってしまっているのではという事でしょうか? ライフサイクルについてあまり良く知らなかったのでこれを機に深堀りしてみようと思います! 色々と解説して下さり本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問