Vue のルーターの基本的な設定コマンドは何ですか?

Vue の Router は、ページ ジャンプとルーティング管理のためのプラグインです。これは、さまざまな URL リクエストに応じてさまざまなコンポーネントをロードし、フロントエンド ルーティング機能を実装するのに役立ちます。 Vue の Router を使用する場合は、基本的な設定を行う必要があります。以下では、Vue の Router の基本的な設定コマンドを詳しく紹介し、具体的なコード例を添付します。

1. Vue Router のインストール
   npm を使用して Vue Router をインストールし、ターミナルを開き、プロジェクト ディレクトリで次のコマンドを実行します:

   npm install vue-router

2. # #Import Vue Router

   Vue Router を main.js ファイルにインポートし、Vue.use メソッドを使用して Vue のプラグインとして登録します。
   

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

3. ルーティングを作成します。インスタンス

   メイン内。js ファイルでルーティング インスタンスを作成し、ルーティング ルールを構成します:
   

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = new VueRouter({
     mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
     routes
   })

4. ルーティング インスタンスのマウント

   ルーティング インスタンスを Vue インスタンスにマウントします。 main.js ファイル:
   

   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app')

5. ルーティング出口の構成

   Vue のルート コンポーネントで、 タグを使用して、ルートに対応するコンポーネントを表示します。
   

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

上記の設定により、Vue の Router の基本的な設定が完了しました。完全な例を次に示します。

まず、Home.vue と About.vue という 2 つのコンポーネントを src/components ディレクトリに作成します。

Home.vue の内容は次のとおりです。

<template>
  <div>
    <h2>Welcome to Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue の内容は次のとおりです。

<template>
  <div>
    <h2>Welcome to About Page</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

次に、index.js ファイルをsrc/router ディレクトリに次の内容を含めます:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

最後に、src/main.js ファイルで次の設定を行います:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上記は、Vue の基本的な設定コマンドとコード例です。ルーター。これらの構成を通じて、ページ間のジャンプとフロントエンドのルーティング機能を実装できます。この記事が Vue Router の理解と使用に役立つことを願っています。

以上がVue のルーターの基本的な設定コマンドは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。