プロジェクトでの Vue-router の使用と注意事項

プロジェクトでの Vue-router の使用とその注意事項

Vue-router は Vue.js の公式ルーティング マネージャーであり、シングルページ アプリケーションの構築に使用されます。 (単一ページのアプリケーション)。 URL を管理し、更新不要のページ間のジャンプを実現し、より柔軟でインタラクティブなフロントエンド アプリケーションの構築に役立ちます。

1. Vue-router の使用

1. Vue-router のインストール

プロジェクトのルート ディレクトリに、npm コマンドを使用してインストールします:

npm install vue-router

2. ルーティングの構成

Vue-router と関連コンポーネントをプロジェクトのエントリ ファイル (main.js など) に導入します:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、2 つのルートを構成します: home と about、対応するコンポーネントは Home と About です。

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

プロジェクトのルート コンポーネント (App.vue など) に、さまざまなルーティング コンポーネントをレンダリングするための タグを追加します。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2. 使用例

以下では、簡単なケースを組み合わせて、Vue-router の使用方法を示します。

オンラインで映画を視聴するための Web サイトを例に挙げると、ホームページと映画の詳細ページの 2 つのページを実装する必要があります。

1. ホームページ コンポーネントを作成します。

src/views ディレクトリに Home.vue ファイルを作成し、次のコードを追加します:

<template>
  <div class="home">
    <h1>欢迎来到电影在线观看网站</h1>
    <button @click="goToDetail">查看电影详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push('/detail')
    }
  }
}
</script>

2. ムービーの詳細ページを作成します。コンポーネント

Detail.vue ファイルを src/views ディレクトリに作成し、次のコードを追加します:

<template>
  <div class="detail">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素'
      }
    }
  }
}
</script>

3. ルーティングの構成

main.js で、導入および構成します。ホームおよび詳細コンポーネント ルーティング:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/detail',
    name: 'detail',
    component: Detail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. プロジェクトの実行

コマンド ラインで npm runserve コマンドを実行してプロジェクトを開始し、http://localhost:8080 にアクセスします。ブラウザでホームページを表示します。

「映画詳細を見る」ボタンをクリックすると映画詳細ページにジャンプし、映画名と監督が表示されます。

3. 注意事項

1. ヒストリー モードを使用する

VueRouter インスタンスを作成するときは、モードをヒストリー モードに設定します。URL の # 記号を削除すると、 URLをもっと美しく。

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

2. 動的ルーティング

Vue-router では、動的ルーティングを使用して、より柔軟なページ ジャンプを実現できます。たとえば、ルーティング パラメータを通じてムービーの ID を渡し、対応するムービーに関する詳細情報をムービー詳細ページに表示できます。

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

// 传递参数
this.$router.push('/detail/123')

// 获取参数
this.$route.params.id

3. ネストされたルーティング

Vue-router はネストされたルーティングをサポートしており、コンポーネント内に別のコンポーネントをロードして、より複雑なページ構造を実現できます。たとえば、映画の詳細ページにレビュー コンポーネントを読み込むことができます。

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    children: [
      {
        path: 'comment',
        component: Comment
      }
    ]
  }
]

以上がプロジェクトでのVue-routerの利用方法とその注意点です。ルートとコンポーネントを構成することで、ページ間を更新せずにジャンプできるようになり、ユーザー エクスペリエンスが向上します。同時に、Vue-router は動的ルーティングとネストされたルーティングもサポートしているため、より豊富で複雑なフロントエンド アプリケーションを構築できます。この記事が Vue-router の理解と使用に役立つことを願っています。

以上がプロジェクトでの Vue-router の使用と注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。