Vue アプリケーションで vue-router を使用するときに「エラー: パス '/xxx' の場所に一致するものが見つかりません」という問題を解決するにはどうすればよいですか?-Vue.js-php.cn

Vue アプリケーションで vue-router を使用するときに「エラー: パス '/xxx' の場所に一致するものが見つかりません」という問題を解決するにはどうすればよいですか?

PHPz

リリース： 2023-06-25 11:47:59

オリジナル

10446 人が閲覧しました

Vue は、アプリケーションでのルーティングの管理を容易にする vue-router と呼ばれるルーティングライブラリが付属する人気の JavaScript フレームワークです。ただし、vue-router を使用すると、パスの一致の問題が原因で、「エラー: パス "/xxx" の場所に一致するものが見つかりません」というエラーが発生することがあります。この記事では、この問題を解決する方法について説明します。

Vue アプリケーションでは、ルーティングは vue-router ライブラリを通じて管理されます。このライブラリは、さまざまな URL をアプリケーションビューにマップするメカニズムを提供します。 vue-router ライブラリを使用すると、アプリケーションをあるページから別のページに簡単にルーティングできます。

「エラー: パス "/xxx" の場所に一致するものが見つかりませんでした」が表示される理由は、アプリケーションで定義されているルーティングパスがナビゲーションリンクと一致しないか、定義されていないため、vue-router が発生する場合があります。 URL パスを解析できなくなります。これはいくつかの異なる方法で解決できます。

最初の解決策は、アプリケーションナビゲーションリンクに一致するルーティングパスがルーターインスタンスで定義されていることを確認することです。この場合、アプリケーション内のルートが定義されているかどうかを確認し、それらがナビゲーションリンクと一致していることを確認する必要があります。そのようなパスが存在する場合は、アプリケーションのルーティング定義に追加する必要があります。サンプルコードは次のとおりです。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '/about',
      component: AboutComponent
    },
    {
      path: '/contact',
      component: ContactComponent
    },
    {
      path: '/my-component',
      component: MyComponent
    },
  ]
})

ログイン後にコピー

上記のコードでは、アプリケーションに対して 4 つの異なるルーティングパスを定義しました。ナビゲーションリンクがこれらのパスのいずれにも一致しない場合は、「エラー: パス "/xxx" の場所に一致するものが見つかりません」が表示されます。

2 番目の解決策は、ワイルドカードパスを使用することです。ワイルドカードパスは、ルート定義でパスが明示的に定義されていない限り、任意のパスと一致します。サンプルコードは次のとおりです。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '*',
      component: NotFoundComponent
    }
  ]
})

ログイン後にコピー

上記のコードでは、未定義のパスに一致するワイルドカードルートを定義しました。これにより、「エラー: パス "/xxx" の場所に一致するものが見つかりません」というメッセージが表示されるのではなく、ナビゲーションリンクが別の "NotFoundComponent" にリダイレクトされます。

3 番目の解決策は、動的パスセグメントを使用することです。動的パスセグメントは、動的パラメータを含むルーティングパスの部分を指します。コロン「:」を使用して動的パラメータを定義すると、URL の値をコンポーネントに渡すことができます。以下はサンプルコードです。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserComponent
    }
  ]
})

ログイン後にコピー

上記のコードでは、動的パスセグメント「/user/:id」を定義します。ここで、「:id」は動的パラメータです。このようにして、ユーザーが「/user/1234」にアクセスすると、Vue は URL からパラメーター値を抽出してコンポーネントに渡します。このアプローチにより、さまざまなルーティングパスやナビゲーションリンクを柔軟に処理できるようになります。

つまり、vue-router を使用する場合は、ルート定義がナビゲーションリンクと一致していることを確認し、Vue ルーティングライブラリのベストプラクティスに従ってください。「エラー: パス "/xxx" の場所に一致するものが見つかりませんでした」が表示される場合は、ルーティングパスとナビゲーションリンクが一致するかどうかを確認し、ワイルドカードパスまたは動的パスセグメントを使用して問題を解決する必要があります。

以上がVue アプリケーションで vue-router を使用するときに「エラー: パス '/xxx' の場所に一致するものが見つかりません」という問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。