vue.js、vue-router は単一ページのアプリケーション実装コードを作成します

この記事では主に、vue.js と vue-router を使用して単一ページを作成するための実装コードを紹介します。

vue.js+vue-router はシングルページアプリケーションを作成します

1. インストール

npm install vue-router

2. ルーターのアプリケーション

1. サブコンポーネントのルーティング変更を監視します

export default {
  name: 'app',
  computed:mapGetters(['loading','shownav']),
  //监听路由的变化
      watch:{
        $route(to,from){
            console.log(to);
            console.log(from);
        }
      },
  components:{
    
  }
}

: $route (読み取り専用で不変、その変更は監視を通じて検出できます)

は、現在の URL とその URL に一致するルーティング レコードを解析して取得した情報を含む、現在アクティブ化されているルートのステータス情報を表します

ルーティング情報オブジェクトが複数の場所に表示されます:

• コンポーネントでは、 this.$route がルーティング情報オブジェクトです

• $route オブザーバー (監視) コールバックでは

• route.match(location) 戻り値

route 情報オブジェクトのプロパティ

• $route.path: 文字列。現在のルートの絶対パス

• $route.params: オブジェクト。

• $route.query: オブジェクト。 URL クエリパラメータ

• $route.fullPath: フルパス

• $route.matched: ルートレコード

• $route.name: 現在のルートの名前

3. vuex

1 . vuex をインストールします

//安装
npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

2. ストアを作成します

Vuex ステータスを保存するディレクトリも作成します

関連する推奨事項:

複数のルーティング領域を持つ単一のページをどのように操作するかについてのケーススタディ

H5シングルページ ジェスチャースライド画面切り替えの原理

webpack、vue、nodeでシングルページのコード共有を実現

以上がvue.js、vue-router は単一ページのアプリケーション実装コードを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。