ホームページ > 記事 > ウェブフロントエンド > vue のルーティング ページが表示されない
Vue を使用して開発する場合、多くの場合、Vue Router を使用してページのルーティングとジャンプを実装する必要があります。しかし、実際に開発を進めていくと、ルーティングページが正常に表示されない場合があり、開発に支障をきたすことがあります。この記事では、実際のケースと解決策を組み合わせて、Vue でルーティング ページが表示されない問題について説明します。
ルーティング設定に Vue Router を使用する場合、通常は router/index.js ファイルで行う必要があります。ここで注意する必要があるのは、ルーティング設定の形式は配列である必要があり、各オブジェクトがルートを表すことです。
以下は、単純な router/index.js ファイルのサンプル コードです。
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', component: Detail } ] })
その中で、routes 配列内の各オブジェクトには、パス、名前、コンポーネントの 3 つの属性が含まれています。これらのプロパティは、ルートのパス、名前、および対応するコンポーネントを表します。
ルーティング設定が正しくない場合、ページはジャンプせず、正しく表示されません。たとえば、「path/」ではなく「path」など、パスの値を誤って記述した場合、ルートは対応するコンポーネントと正しく一致せず、ページは表示されません。
ルートジャンプを行う場合、該当するコンポーネントを指定する必要があります。ルーティング設定に間違ったコンポーネント名またはパスを記述すると、ページが正しく表示されません。
次は例です:
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Detail from '@/components/Detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', component: Detail1 } ] })
上の例では、Detail コンポーネントの名前を間違って記述したため、ページが正しく表示されませんでした。ルーティング設定で使用されているコンポーネント名またはパスが正しいことを確認する必要があります。
ルーティング設定やコンポーネント導入に問題がなくても、ページが正しく表示されない場合があります。アプリにないことが原因である可能性があります。対応するルーティング出口を vue に追加します。
以下は、単純な App.vue ファイルのサンプル コードです:
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> // ... </style>
上の例では、975b587bf85a482ea10b0a28848e78a4 コンポーネントを使用して、対応するルートのコンテンツを表示します。このコンポーネントを追加しないと、ルーティング ページが正しく表示されません。
古いバージョンの Vue を使用している場合、ルーティング ページが正しく表示されない可能性もあります。古いバージョンでは、修正されたバグや問題がいくつかあり、ルーティングが正しく機能しなくなる可能性があります。
この問題を解決するには、最新の Vue バージョンにアップグレードしてみてください。同時に、通常のルーティングが確実に機能するように、Vue Router のバージョンが Vue のバージョンと一致していることを確認する必要もあります。
概要:
上記は、Vue でルーティング ページが表示されない場合に考えられるいくつかの理由と解決策です。 Vue の開発プロセスにおいてルーティングは比較的重要な機能であり、プログラムの正確性を確保するためにルーティングの設定やコンポーネントの導入を真剣に行う必要があります。ルートが表示できない問題が発生した場合は、ルーティング設定、コンポーネントの導入、ルートのエクスポート、Vue のバージョンを確認することでトラブルシューティングを行い、問題を解決できます。
以上がvue のルーティング ページが表示されないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。