Vue のルーティング制御および管理テクノロジ

Vue は非常に人気のあるフロントエンド フレームワークで、便利なルーティングの制御と管理を行うためのルーティング マネージャーを提供します。この記事では、開発者がこれらのテクノロジをより深く理解し、適用できるように、Vue のルーティング制御および管理テクノロジについて詳しく説明します。

1. Vue Router の基本

Vue Router は Vue.js の公式ルーティング マネージャーであり、Vue.js のコアと深く統合されており、単一のルーティング制御を適切に実装できます。ページアプリケーションです。 Vue Router は、ルートとコンポーネント間のマッピングを管理することで動的なビューの更新を実装し、ビューとデータの状態を効果的に分離して、アプリケーション構造をより明確にして保守しやすくします。

1.1 インストールと紹介

Vue Router を使用する前に、npm を通じてインストールする必要があります。次のコマンドでインストールできます:

npm install vue-router –save

インストールが完了したら、Vue Router を Vue アプリケーションに導入し、基本的な設定を行う必要があります。 main.js ファイルに次のコードを記述できます。

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

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

1.2 ルーティング ナビゲーション

Vue Router は、router-link タグを使用したナビゲーションやジャンプなど、ルーティング ナビゲーションの複数の方法を提供します。ページ。ナビゲーションが完了するまで待ちます。など

コンポーネント内で router-link タグを使用すると、以下に示すように、ルート ナビゲーションを簡単に実装できます。

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

さらに、以下に示すように、プログラムによるナビゲーションを使用してルート ジャンプを実装することもできます。

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

1.3 ルーティングのネスト

Vue Router は、より複雑なルーティングの制御と管理を実現できる、マルチレベルのネストされたルーティングの構成をサポートしています。たとえば、以下に示すように、親ルートの下にサブルートとネストされたサブルートを定義できます:

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

ルーティング コンポーネントで、975b587bf85a482ea10b0a28848e78a4 タグを使用してサブルートを占有することができます。 -ルート。親ルートはコンポーネントであり、次に示すように、子ルートはこのコンポーネントの 975b587bf85a482ea10b0a28848e78a4 タグ内にレンダリングされます:

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

2. Vue Router Advanced

さらにルーティング管理機能に加えて、Vue Router はルーティング パラメータ、ルーティング ガード、ダイナミック ルーティングなどの高度な機能も提供します。このセクションでは、これらの機能の使用法と実装について説明します。

2.1 ルーティングパラメータの受け渡し

実際の開発では、通常、現在ログインしているユーザーの情報や記事リストなどのパラメータをルーティングコンポーネントに渡す必要があります。 Vue Router では、パラメータは props 属性を介して渡すことができます。

以下に示すように、ルートを定義するとき、props 属性を使用してパラメータを転送します。

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

ルーティング コンポーネントで、props を true に設定して、ルーティング パラメータをコンポーネントの props として使用します。属性が渡されます。例:

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

この時点で、ルーティング パラメータはユーザー属性として User コンポーネントに渡され、コンポーネントは this.user を通じてこれらのパラメータを取得できます。

2.2 ルートガード

ルートガードは、Vue Router が提供する重要な機能で、ルートジャンプ処理中に権限確認やログイン判定などを行うことができます。 Vue Router は、グローバル ガード、ルート専用ガード、コンポーネント内ガードの 3 種類のルート ガードを提供します。

グローバル ガードには、beforeEach、beforeResolve、afterEach が含まれます。これらは、配線ジャンプの前、ジャンプが成功した後、および配線プロセス全体が完了した後にインターセプトされます。例:

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

ルート排他的ガードは、ルートの定義時に設定することも、コンポーネント内で設定することもできます。例:

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

コンポーネント内のガードは、ルーティング コンポーネントで定義された beforeRouteEnter、beforeRouteUpdate、および beforeRouteLeave 関数です。例:

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

2.3 動的ルーティング

動的ルーティングとは、URL パラメータに基づいてルートを動的に照合するテクノロジを指します。 Vue Router は、ルーティング パラメーターに基づいた動的なマッチング機能を提供し、さまざまなパラメーターに基づいてルーティング ジャンプやコンポーネント レンダリングを実行できます。

たとえば、ルートを定義する場合、以下に示すように、コロン「:」を使用してパラメータを指定できます。

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

コンポーネント内では、これを通じてルートを取得できます。$ Route.params パラメーター (以下に示すように):

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

ジャンプをルーティングするとき、$router.push メソッドを使用して動的ルート マッチングを実行できます (例:

this.$router.push({
  path: '/posts/' + id
})

3)。

# この記事では、ルート ナビゲーション、ルート ネスティング、ルート パラメーターの受け渡し、ルート ガード、動的ルーティングなど、Vue Router の基本的な使用法と高度な機能を紹介します。 Vue Router は Vue.js の重要なルーティング マネージャーであり、フロントエンド アプリケーションのルーティング制御と管理をより適切に実装するのに役立ちます。この記事が皆さんにインスピレーションを与え、Vue Router テクノロジをより適切に開発に適用するのに役立つことを願っています。

以上がVue のルーティング制御および管理テクノロジの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。