1. 説明Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js のコアと深く統合されているため、シングルページ アプリケーションを簡単に構築できます。含まれる機能は次のとおりです:
2. インストール最初の vue-cli に基づいてテストと学習を行います。まず、ノード モジュールに vue-router が存在するかどうかを確認します。 npm で vue-router をインストールします --save-dev モジュール プロジェクトで使用する場合は、Vue.use() を介してルーティング機能を明示的にインストールする必要があります。 'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 Vue.use(VueRouter); 3. テスト1. まず不要なものを削除する <テンプレート> <div> <h1>目次ページ</h1> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:"コンテンツ" } </スクリプト> Main.vue コンポーネント <テンプレート> <div> <h1>ホーム</h1> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:"メイン" } </スクリプト> 4. ルーターをインストールします。srcディレクトリに、ルーターを保存するための新しいフォルダーrouterを作成し、ルーターのindex.jsを次のように設定します。 'vue' から Vue をインポートします //ルーティングプラグインをインポートする import Router from 'vue-router' //上記で定義したコンポーネントをインポートします。import Content from '../components/Content' Main を '../components/Main' からインポートします。 //ルーティングをインストールします Vue.use(Router); //ルーティングを設定する export default new Router({ ルート:[ { //ルートパス パス:'/content', //ルート名 name:'content', // コンポーネントにジャンプする component:Content }, { //ルートパス path:'/main', //ルート名 name:'main', // コンポーネントにジャンプ component:Main } ] }); 5. main.jsでルーティングを設定する 'vue' から Vue をインポートします './App' から App をインポートします //上記で作成したルーティング設定ディレクトリをインポートします。import router from './router' //内部のルーティング設定を自動的にスキャンします。//プロダクション モードでプロンプトをオフにするには、Vue.config.productionTip = false; 新しいVue({ el:"#アプリ", //ルーティングルーターを構成する、 コンポーネント:{App}, テンプレート:'<App/>' }); 6. App.vueでルーティングを使用する <テンプレート> <div id="アプリ"> <!-- router-link: デフォルトでは、<a> タグとしてレンダリングされ、to 属性は指定されたリンクです。router-view: ルートに一致するコンポーネントをレンダリングするために使用されます --> <router-link to="/main">ホーム</router-link> <router-link to="/content">コンテンツ</router-link> <ルータービュー></ルータービュー> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:'アプリ' } </スクリプト> <スタイル></スタイル> 上記は、Vue-router ルーティングの使用方法の詳細な内容です。Vue-router ルーティングの使用方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル (CentOS7)
>>: LNMP を展開して HTTPS サービスを有効にする方法に関するチュートリアル
以前、CSS を使用してテーブルの border + bordercolordark + borde...
プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...
目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...
1. はじめに実際のサーバーはパブリックインターネットに直接公開されるべきではありません。そうしな...
目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...
目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...
Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...
目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...
目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
操作中に Docker コンテナの公開ポートを変更または追加する必要がある場合がありますが、実行中の...