Vue ルーティング公式ドキュメントの学習メモ

Vue ルーティング公式ドキュメントの学習ノート

Vue は、シングルページ アプリケーション (SPA) をより便利かつ迅速に構築するのに役立つ、使いやすいプログレッシブ JavaScript フレームワークです。その中でも、Vue Router は Vue の非常に重要なコンポーネントであり、主にアプリケーション全体のルーティングを管理するために使用されます。この記事ではVueルーティングの公式ドキュメントの勉強メモを紹介します。

1. Vue Router の使用を開始する

まず、npm またはyarn を介して Vue Router をインストールする必要があります:

npm install vue-router

yarn add vue-router

次に、main.js に Vue Router を導入し、 add it マウント:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
    path: '/',
    component: Home
  }]
})

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

その中で、Vue.use() メソッドを通じて Vue Router を Vue に登録し、新しい VueRouter インスタンスを作成してルーティング ルールを設定しました。最後に、VueRouter インスタンスを Vue インスタンスにマウントします。

次に、ルーティング ルールに対応するコンポーネントを設定する必要があります。例:

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

上記のコードでは、Home コンポーネントと About コンポーネントを導入し、ルーティング ルールでそれらを使用しました。ルート パスにアクセスすると Home コンポーネントが表示され、/about パスにアクセスすると About コンポーネントが表示されます。

2. ルート ジャンプ

Vue Router を使用するプロセスでは、ルート ジャンプを実行する必要があることがよくあります。 Vue Router は、次のようなルート ジャンプを実装するさまざまな方法を提供します:

1. $route オブジェクトを通じて

コンポーネント内の $route オブジェクトを通じてルート ジャンプを実装できます。 ：

this.$router.push('/about')

2. $route.linkActive クラスを通じて実装

ページ上で現在選択されているルートに特定のスタイルを追加する必要がある場合、$route.linkActive クラスを使用できます。例:

<router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link>

上記のコードでは、現在のルートが指定されたルートと一致すると、アクティブなスタイルがルート要素に追加されます。

3. プログラムによるナビゲーションによる実装

場合によっては、フォームの送信後に指定されたページにジャンプするなど、JavaScript コードでルーティング ジャンプを実行する必要があります。現時点では、プログラムによるナビゲーションを使用してルーティング ジャンプを実装できます (例:

// 使用命名路由跳转
this.$router.push({ name: 'about' })
  
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })

3. ルーティング コンポーネントからパラメータを渡す

実際の開発では、多くの場合、パラメータをルーティング コンポーネントから転送する必要があります。ルーティング コンポーネント 別のルーティング コンポーネントに渡されます。 Vue Router は、ルーティング コンポーネントでパラメーターを渡すためのさまざまな方法を提供します (例:

1. $route オブジェクトを通じて

#ルーティング コンポーネントでルーティング パラメーターを取得する必要がある場合、次のことが可能です) $ Route.params オブジェクトを使用します。例:

// 定义路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 在组件中获取路由参数
export default {
  methods: {
    goToUser(id) {
      // 参数传递方式1
      this.$router.push('/user/' + id)
      
      // 参数传递方式2
      this.$router.push({ path: '/user/' + id })
      
      // 参数传递方式3
      this.$router.push({ name: 'user', params: { id }})
    }
  }
}

// User组件中获取路由参数
export default {
  created() {
    const id = this.$route.params.id
  }
}

2。クエリ パラメータを通じて実装されます。

クエリ パラメータは、パラメータを渡すためのより柔軟な方法です。URL の後ろでパラメータを直接結合でき、例:

this.$router.push({
  path: '/user',
  query: { id: 123 }
})

// User组件中获取query参数
export default {
  created() {
    const id = this.$route.query.id
  }
}

4. ルーティング フック関数

Vue Router は、ルーティング変更時にさまざまな操作を実行するのに役立つさまざまなルーティング フック関数を提供します。たとえば、コンポーネントに入る前にユーザーのログインステータスを確認したり、ルーティング変更時にページジャンプを実行したりできます。

1. グローバル ルーティング フック関数

グローバル ルーティング フック関数は、アプリケーション全体でルーティングが変更されたときにトリガーされます。たとえば、次のようになります。

const router = new VueRouter({
  routes: [...],
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requireAuth && !store.state.isUserLogin) {
    next({ path: '/login' })
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 页面跳转统计
  statistics(to.path)
})

上記のコードでは、 router.beforeEach() メソッドを通じてグローバル フロント ガードを定義し、ユーザーがログインしているかどうかを判断します。ログインしていない場合は、ログイン ページにジャンプします。一部の統計やその他の操作は、グローバル ポスト フックで実行できます。

2. コンポーネント内のルーティング フック関数

グローバル ルーティング フック関数に加えて、Vue Router はコンポーネント内に beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate などのいくつかのルーティング フック関数も提供します。たとえば、beforeRouteEnter フック関数でコンポーネント インスタンスを取得し、次のような初期化操作を実行できます:

export default {
  beforeRouteEnter(to, from, next) {
    // 获取组件实例
    const vm = this
    
    // 发起异步请求
    getAsyncData().then(response => {
      // 将数据保存到组件的data中
      vm.data = response.data
      
      // 继续路由跳转
      next()
    })
  }
}

上記のコードでは、コンポーネントがルートに入るときに beforeRouteEnter フック関数をトリガーしました。非同期データ データをコンポーネントのデータに保存し、next() メソッドによるルーティングを続行します。

概要:

この記事では、Vue Router の入門、ルーティング ジャンプ、パラメータを渡すルーティング コンポーネントやルーティング フック関数など、Vue Router 公式ドキュメントの学習メモを中心に紹介します。 Vue 開発で Vue Router を使用する皆さんの参考になれば幸いです。

以上がVue ルーティング公式ドキュメントの学習メモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。