Vue でのルーティングの使用法

Vue のルーティングとは、URL パスを対応するコンポーネントにバインドするメカニズムを指します。Vue は、公式ルーティングプラグイン Vue Router を提供します。これは、シングルページアプリケーションのページジャンプと URL 管理を実装するために特別に使用され、WebApp の構築やページ間のナビゲーションの管理によく使用されます。

Vueルーターのインストール

Vue Router を使用する前に、まず Vue Router をインストールする必要があります。Vue Router は、npm コマンドを使用してインストールできます。

npm install vue-router@next

ルーターインスタンスを作成する

app.js で Router インスタンスを作成します。

import {
    
     createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
})

createRouter は、ルーティングインスタンスを作成するためのファクトリ関数です。パラメータとしてオプションオブジェクトを受け入れます。ここで、history 属性はルーティングモードを指定し、createWebHistory は HTML5 履歴 API のルーティングモードを使用します。ルート属性は、さまざまなルーティング設定を含む配列であり、各ルーティング設定オブジェクトには、ルーティングアドレスと対応するコンポーネントをそれぞれ表すパス属性とコンポーネント属性が含まれます。

ルータービューを使用する

Vue Router で使用されるコアコンポーネントは router-view で、app.vue で次のように使用できます。

<template>
  <div>
    <h1>Vue Router Demo</h1>
    <router-view></router-view>
  </div>
</template>

ルーターリンクを使用する

Vue Router のコアコンポーネントの 1 つは router-link で、これはルーティングジャンプのためのナビゲーションリンクを実装するために使用されます。次のようなページで使用できます。

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
    <router-link to="/">Go back to Home</router-link>
  </div>
</template>

このうち、to属性はジャンプ先のルーティングパスを示します。

パラメータを使用したルート

多くの場合、ルート内でユーザー ID や製品 ID などのパラメーターを渡す必要があります。次のようにルートパラメーターを使用できます。

const routes = [
  {
    
     path: '/', component: Home },
  {
    
     path: '/user/:id', component: User },
]

ルーティングアドレスに「:id」を追加します。これは、/user/ にジャンプした後にパラメータ ID を追加することを意味します。このパラメータは、コンポーネントの $route.params.id を通じて取得できます。

ナビゲーションガード

Vue Router は、ルーティングインターセプトやページアクセス制御などに使用できる、beforeEach、beforeResolve、afterEach など、ルーティングジャンプの動作を制御するいくつかのナビゲーションガードを提供します。

router.beforeEach((to, from, next) => {
    
    
  // 在跳转之前进行一些处理
  if (to.meta.requiresAuth && !user.isAuthenticated) {
    
    
    next('/login')
  } else {
    
    
    next()
  }
})

以上がルーティングモジュールの主な内容ですが、Vue Router が提供する機能は非常に豊富で、さまざまなシナリオのニーズに対応できます。