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 サービスを有効にする方法に関するチュートリアル
Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...
次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...
目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...
nofollowをめぐる論争Zac と Guoping の間では、nofollow が PR を無駄...
この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...
DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...
手ぶれ防止: 繰り返しのクリックによるイベントのトリガーを防止まず、揺れとは何でしょうか? 震えるの...
1. Apacheをインストールする # yum インストール -y httpd httpd-de...
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...
最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...
Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...
この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...
質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...