🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

4895閲覧

Vue + TypeScriptでの画面遷移

sanezane

総合スコア91

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2019/11/25 12:21

編集2019/11/26 03:02

TypeScript + Vueでの画面遷移の仕方について

仕様

  • URL直叩き時のログインユーザの権限による画面遷移の制御する
  • src/pluginsにて定義
  • 権限のないURLを打った場合、もともとの画面(from)へリダイレクトさせるようにthis.$router.push(from.path)としていますがCannot read property '$router' of undefinedとエラーになります。

わからないこと

  • 1.TypeScriptでvueを記述したときの画面遷移ってどう書けばいいのか
  • 2.そもそもpluginsで画面遷移とかまでやるべきじゃない??
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default async ({ app, store }) => { await store.dispatch('menu/security') let kngnInfo app.router.afterEach((to, from) => { //ログインユーザの権限情報を取得 const security = store.getters['menu/security'] //メニューとURLのオブジェクトを用意 const menus = [ { kngn: 'kngnAAA', url: '/AAA' }, { kngn: 'kngnBBB', url: '/BBB' }, { kngn: 'kngnCCC', url: '/CCC' }, { kngn: 'kngnDDD', url: '/DDD' }, ] //遷移先画面の権限を持っているかを確認 const toKngn = menus.find(menu => { return menu.url === to.path }) //権限がない場合は遷移前画面へリダイレクト if (!security[toKngn.kngn]) { kngnInfo = security[toKngn.kngn] //ここでエラー this.$router.push(from.path) } }) }

やったこと1

  • 回答いただきました通りbeforeEachとnextを使うとThis page could not be foundが発生

イメージ説明

やったこと2

最初に提示したコードの引数にredirectを加えexport default async ({ app, store, redirect }) => {としてredirect(from.path)で遷移させようと試みました。
結果的に遷移には成功したのですが、権限のないページでも一瞬ページが見えてから元のページに戻ります。こうなるとやはりbeforeEachを使うしかないようですが、This page could not be foundとなってしまう原因が解決できません。助言をいただけませんでしょうか。
以下、現状のソースです。

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //■redirectを追加 export default async ({ app, store, redirect }) => { await store.dispatch('menu/security') let kngnInfo app.router.afterEach((to, from) => { //ログインユーザの権限情報を取得 const security = store.getters['menu/security'] //メニューとURLのオブジェクトを用意 const menus = [ { kngn: 'kngnAAA', url: '/AAA' }, { kngn: 'kngnBBB', url: '/BBB' }, { kngn: 'kngnCCC', url: '/CCC' }, { kngn: 'kngnDDD', url: '/DDD' }, ] //遷移先画面の権限を持っているかを確認 const toKngn = menus.find(menu => { return menu.url === to.path }) //権限がない場合は遷移前画面へリダイレクト if (!security[toKngn.kngn]) { kngnInfo = security[toKngn.kngn] //■redirectとすると遷移はするが一瞬toのページが見えてからfromに戻る。。。 redirect(from.path) } }) }
  • ちなみにbeforeEachの場合はtoのページが一瞬も見えることなく処理されるので画面描画のライフサイクルのタイミングの問題さえクリアできれば解決するのですが。。。

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

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

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

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

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

guest

回答1

0

Vueコンポーネント上でないと、this.$routerは存在しません。

afterEachを使わなければいけない理由がなければ、beforeEachに置き換えて、

app.router.beforeEach((to, from, next) => { -- 略 -- //権限がない場合は遷移前画面へリダイレクト if (!security[toKngn.kngn]) { kngnInfo = security[toKngn.kngn] next(from.path) } // 呼び忘れ注意 next() })

とするのはどうでしょうか?

グローバルビフォーガード


そもそもpluginsで画面遷移とかまでやるべきじゃない??

私はmiddlewareでやっていますね。おそらくそちらのほうが用途的に適していると思われます。

投稿2019/11/26 00:01

michael-ilcsy

総合スコア180

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

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

sanezane

2019/11/26 03:03

回答ありがとうございます。 まず、beforeEachにして`next(from.path)`で実装すると、ページが戻る際に`やったこと1`のように`This page could not be found`が発生してしまうようになりました。一旦、afterEachのままにして他に方法はないか考えました。`やったこと`以下に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問