起動時に指定されたブラウザURLでリダイレクトする


9

基本パスを使用して新しいVueアプリを作成しました。アプリが別のVueアプリに埋め込まれているため、このアプリはrouter-view起動時にをレンダリングしません。このアプリが別のアプリに組み込まれる方法または理由について詳しく知りたい場合は、こちらをご覧ください。

VueアプリをメインVueアプリのコンテナーにマウントする

この問題に対する私自身の答え:

https://stackoverflow.com/a/58265830/9945420

アプリケーションを起動すると、以外のすべてがレンダリングされますrouter-view。起動時に指定のブラウザURLでリダイレクトしたい。これは私のルーター設定です:

import Vue from 'vue';
import Router from 'vue-router';

import One from './views/One.vue';
import Two from './views/Two.vue';

Vue.use(Router);

const router = new Router({
    base: '/my-embedded-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: One,
        },
        {
            path: '/two',
            component: Two,
        },
    ],
});

router.replace(router.currentRoute.fullPath);

export default router;

アプリがを呼び出すときにコンポーネントTwoをレンダリングする必要があります.../my-embedded-app/two。残念ながら、router.replace常にリダイレクトします/(そのため、ブラウザのURLはです.../my-embedded-app/)。私はをデバッグrouterし、パスが/であることを確認し/twoましたが、そうであると期待しています。

重要な注意:/two URLがのときはいつでも ユーザーをリダイレクトしたくありません/TwoURLがのときにビューをレンダリングしたいだけです/two。現在はありません。

何が悪いのでしょうか?多分私はそのリダイレクトさえ必要とせず、よりエレガントな方法で問題を解決できます。


つまり、-/ my-embedded-app / oneをURLとして記述し、コンポーネントTwoを-/ my-embedded-app / twoとして記述したときに、コンポーネントOneをレンダリングしたいですか?はいの場合、試しましたか-{パス: 'two'、コンポーネント:Two、} '/'を '/ two'から削除します
urvashi

はい、正確に。私はあなたのアプローチを試しましたが、このルートはスラッシュを使用する必要があるという警告が表示されます。アプリケーションを実行する場合、このルートは...そして、うまくいきませんでした
hrp8sfH4xQ4

ルートの順序を変更できますか?
VariableVasasMT

回答:


1

これは通常の動作であり、単一ページアプリケーションの動作方法です。「#」記号のような「ポンド」は、リンクがアプリケーションを別のページに移動しないことを意味します。

ルーターモードを次のように変更できます

mode:"hash"

0

更新:jsfiddle

発生しているのは、route.currentRoute.fullPathルーターの準備が整う前に実行されたことです。


それは何も変わりませんでした。呼び出しの代わりにrouter.currentRoute.fullPath引き続き返される//twolocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4 '11 / 10/11

tryrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT

うまくいきませんでした。onReadyイベントを使用すると、このエラーが発生しますmessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4

@ hrp8sfH4xQ4私はjsfiddleを作成し、必要なものを正確に説明することをお勧めします。
VariableVasasMT、

申し訳ありませんが、これをバイオリンで再現することはできません。IFrameコンテナにはファイルサーバーが必要です。しかし、これはテスト目的のリポジトリですgithub.com/byteCrunsher/router-startup
hrp8sfH4xQ4

0

お試しくださいbeforeEnter。以下のコードを見てください:

const router = new Router({
  base: "/my-embedded-app/",
  mode: "history",
  routes: [
    {
      path: "/",
      component: One,
      beforeEnter: (to, from, next) => {
        // Your are free to add whatever logic here.
        // On first visit
        next("/two");
      }
    },
    {
      path: "/two",
      component: Two
    }
  ]
});

ナビゲーションガードの詳細については、こちらをご覧ください


申し訳ありませんが、tony19の回答についても同じです。ユーザーをリダイレクトしたくない。TwoブラウザのURLがの場合にビューをレンダリングしたい.../two。現在はありません
hrp8sfH4xQ4

0

実際にテストするためにgithubリポジトリまたはいくつかを提供できますか?

そうでない場合、私の最初のアイデアは、ベースとして「空の」ビューを持つ子ルートを使用することです。ここでは、私が試したものの例を示します。(私の場合は働いています)

router.js

export default new Router({
    mode: 'history',
    base: '/my-embedded-app/',
    routes: [
      {
        path: '/',
        name: 'base',
        component: Base,
        children: [
          {
            path: '',
            name: 'one',
            component: One
          },
          {
            path: 'two',
            name: 'two',
            component: Two
          }
        ]
      }
    ]
})

Base.vue

<template>
    <router-view/>
</template>

One.vue

<template>
  <div>One</div>
</template>

Two.vue

<template>
  <div>Two</div>
</template>

この問題は、ここではこれに関連しているstackoverflow.com/questions/58397766/...と私はテストのための小さなリポジトリを作成しgithub.com/byteCrunsher/router-startup
hrp8sfH4xQ4
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.