Vueプロジェクトでページジャンプを実装する方法

問題の説明:

vue-routerフロントエンド開発でルーティング ページ ジャンプを実装するために使用されるモジュールです。以下では、エディターが、すでに作成されている vue-router プロジェクトに基づいてページ ジャンプを実装する方法を示します。

実験結果と考察:

1. vue-cli デフォルト プロジェクトを作成する (babel のみを含む)

2. 作成ファイルを入力する

管理者として作成されたファイルパスを入力し、コマンドnpm install vue-router –saveを実行します。

(Taobaoイメージがインストールされている場合は、cnpm install vue-router-saveを実行してください)

3. 設定を確認する

package.json では、vue-router が正常に設定されたかどうかを確認できます。

4. ビューフォルダを作成する

新しいビューフォルダを作成し、このフォルダに home.vue と about.vue という 2 つのコンポーネントを作成します。

5. APP.vueを設定する

次のように設定します。

<テンプレート>

<div id="アプリ">

<div id="nav">

<router-link to="/">ホーム</router-link> |

<router-link to="/about">について</router-link>

</div>

<ルータービュー/>

</div>

</テンプレート>

<スタイル>

＃アプリ {

テキスト配置: 中央;

上マージン: 60px;

}

</スタイル>

6. main.jsを構成する

'vue' から Vue をインポートします

'vue-router' から Router をインポートします。

'./views/Home.vue' から Home をインポートします。

Vue.use(ルーター)

デフォルトの新しいルーターをエクスポートします({

モード: '履歴'、

ベース: process.env.BASE_URL、

ルート: [

{

パス： '/'、

名前: 'ホーム',

コンポーネント: ホーム

},

{

パス: '/about',

名前: 'about',

コンポーネント: () => import( './views/About.vue')

}

]

})

7. 運用結果

次のように：

問題の概要:

この実験では、 cmdコマンドプロンプトにvue-routerをインストールし、 router.jsを設定してページジャンプ機能を実装します。簡単なページジャンプ機能は実装できましたが、 router.js内のルートとコンポーネントの定義が明確に説明されていません。ページジャンプ機能については後ほど学習します。

これで、vue プロジェクトでページ ジャンプを実装する方法に関するこの記事は終了です。vue プロジェクトでページ ジャンプを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。