web-dev-qa-db-ja.com

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

私は新しいVueアプリをベースパスで作成しました。アプリが別のVueアプリに埋め込まれているため、このアプリはrouter-view起動時。このアプリが別のアプリに組み込まれる方法や理由について詳しく知りたい場合は、こちらをご覧ください。

mount Vueアプリをメインのコンテナに入れるVue app

そして、この問題に対する私自身の答え：

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

アプリケーションを起動すると、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;

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

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

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

javascriptvue.jsvuejs2vue-router
10
hrp8sfH4xQ4

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

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

mode:"hash"
1
Muhammad Elbadawy

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
    }
  ]
});

ナビゲーションガードの詳細 こちら

0
Rajeev Radhakrishnan

実際にテストするために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>
0
victor-gabou

更新： jsfiddle

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

0
VariableVasasMT