フロントエンド初心者向けの Vue3+Vite+Ts+Pinia+Sass プロジェクトガイドに関する一連の記事 - 第 7 章ルーティング設定 (vue-router の詳細な解釈)

一連の記事の目次 (クリックして表示)

記事ディレクトリ

一連の記事の目次 (クリックして表示)
序文
1. はじめに
2. インストール
3. 基本的な使い方
4.ルートガード
5. 動的ルーティング
6. その他の構成
要約する

序文

vue ファミリーバケットの重要な部分として、vue-router は非常に重要です。 Vue Router は Vue.js の公式ルートマネージャーです。シングルページアプリケーション (SPA) 開発中にルーティング機能を提供します。 Vue Router ページ間を移動してコンポーネントをロードするためのフロントエンドルートを定義できます。動的ルーティング、ネストされたルーティング、ルーティングパラメーターなどの高度な機能をサポートしており、開発者が明確な構造とスムーズな対話を備えたフロントエンドアプリケーションを構築するのに役立ちます。公式 Web サイトのアドレス:https://router.vuejs.org/zh/

1. はじめに

Vue Router は、Vue.js の公式ルーターです。 Vue.js コアと深く統合されているため、Vue.js を使用して単一ページのアプリケーションを簡単に構築できます。特徴は次のとおりです。

ネストされたルートマップ
動的ルーティング
モジュール式のコンポーネントベースのルーティング構成
ルーティングパラメータ、クエリ、ワイルドカード
Vue.js のトランジションシステムによって提供されるトランジション効果を示します。
詳細なナビゲーション制御
CSS クラスへのリンクを自動的にアクティブ化する
HTML5 ヒストリーモードまたはハッシュモード
カスタマイズ可能なスクロール動作
URLの正しいエンコード

2. インストール

# npm 安装
npm install @types/vue-router

# yarn 安装
yarn add @types/vue-router

ここに画像の説明を挿入します

3. 基本的な使い方

1. 基本的なルーティング構成

src ファイルの下にrouter ファイルディレクトリを追加します

Route.ts ファイルを追加

import {
    
     RouteConfig } from 'vue-router';

// 公共路由
export const constantRoutes: RouteConfig[] = [
  {
    
    
    path: '/',
    redirect: '/login'
  },
  {
    
    
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'Login',
    meta: {
    
     title: 'login' }
  },
]

Index.ts ファイルを追加

import {
    
     createRouter, createWebHistory } from 'vue-router'
import {
    
     constantRoutes } from './route'

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

export default router

main.ts内

import {
    
     createApp } from 'vue'
import App from './App.vue'

import 'normalize.css'
import './styles/index.scss'

import router from './router' # 新增
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App) # 新增

app.use(router)

app.use(ElementPlus)
app.mount('#app')

srcディレクトリにビューファイルを追加

ビューファイルの下にログインファイルを追加し、index.vue ファイルを追加します。

<template>
  <div>
    login
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

</style>

App.vueファイルを変更する

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

<script setup lang="ts">

</script>

<style scoped></style>

ここに画像の説明を挿入します

2. 宣言型ナビゲーションとプログラム型ナビゲーション

1. 宣言型ナビゲーション

を使用して<router-link></router-link>作成a 标签し、ナビゲーションリンクを定義することは宣言型ナビゲーションと呼ばれ、to はナビゲーションの目的地を表示します。

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

プログラムによるナビゲーションは、その名前が示すように、コードを通じてルートをジャンプすることです。別の URL に移動するには、 router.push メソッドを使用します。 Vue インスタンス内では、$router を通じてルーティングインスタンスにアクセスできるため、ルーティングジャンプと次の宣言的ジャンプには $router.push('/home') を使用します。同等

よく使用される API

// 向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL
router.push(location, onComplete?, onAbort?)// onComplete 与 onAbort 可选

// 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样，替换掉当前的 history 记录
router.replace(location, onComplete?, onAbort?)// onComplete 与 onAbort 可选

// 在浏览器记录中前进一步，等同于 window.history.forward()
router.go(1)

// 后退一步记录，等同于 window.history.back()
router.go(-1)

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

router によって制御されるビューは <router-view></router-view> に表示されることがわかっているため、ルートのネストを実装するには、<router-view></router-view> を配置します。で十分です。ネストされたルートをルーティング設定の children フィールドに入力します。
ここに画像の説明を挿入します
views ファイルの下に news ディレクトリを作成し、その中に対応するカテゴリのファイルをいくつか作成します。

animal.vue文件

<template>
  <div>
    animal
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

</style>

nature.vue文件

<template>
  <div>
    nature
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

次に、ニュースに基づいてネストされたルーティングを作成します。

{
    
    
    path: '/news',
    component: () => import('@/views/news/index.vue'),
    name: 'News',
    meta: {
    
     title: 'news' },
    children: [
      {
    
    
        path: 'animal',
        component: () => import('@/views/news/animal.vue'),
        name: 'AnimalList',
        meta: {
    
     title: 'animalList' }
      },
      {
    
    
        path: 'nature',
        component: () => import('@/views/news/nature.vue'),
        name: 'NatureList',
        meta: {
    
     title: 'natureList' }
      }
    ]
  }

4. 動的ルートマッチング

1. 複数のパスを同じコンポーネントにマッピングする方法

ある時点で、同じ特性を持ついくつかのルートを（routes）同じビューにマッピングする必要があります（component）。たとえば、 ArticleDetail コンポーネントがあります。異なるコンテンツを表示するさまざまな id 記事は、このコンポーネントを使用してレンダリングする必要があります。次に、 vue-router のルーティングパスで「動的パスパラメータ」 （dynamic segment） を使用して、この効果を実現します。

2. コードのデモ

ルーティングを変更し、テストコードを追加して見てみましょう。

route.ts 文件

{
    
    
    path: '/news',
    component: () => import('@/views/news/index.vue'),
    name: 'News',
    meta: {
    
     title: 'news' },
    redirect: '/news/animal',
    children: [
      {
    
    
        path: 'animal',
        component: () => import('@/views/news/animal.vue'),
        name: 'AnimalList',
        meta: {
    
     title: 'animalList' }
      },
      {
    
    
        path: 'nature',
        component: () => import('@/views/news/nature.vue'),
        name: 'NatureList',
        meta: {
    
     title: 'natureList' }
      },
      // 增加文章详情组件
      {
    
    
        path: 'article/:id',
        component: () => import('@/views/news/article.vue'),
        name: 'Article',
        meta: {
    
     title: 'article' }
      }
    ]
  }

ニュースのindex.vueコンポーネントを変更する

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

<script setup lang="ts">

</script>

<style lang="scss" scoped>

</style>

テスト用にanimal.vueコンポーネントコードを変更します。

<template>
  <div>
    <el-button type="primary" @click="showArticleInfo(1)">id: 1</el-button>
    <el-button type="primary" @click="showArticleInfo(2)">id: 2</el-button>
  </div>
</template>

<script setup lang="ts">
import {
    
     useRouter } from "vue-router";

const router = useRouter();
const showArticleInfo = (id: number) => {
    
    
  router.push({
    
    
    path: `/news/article/${
      
      id}`,
  });
};
</script>

<style lang="scss" scoped></style>

ここに画像の説明を挿入します

Article.vue コンポーネントを追加しました

<template>
  <div>{
    
    {
    
     route.path }}</div>
  <el-button type="danger" @click="goBack">return</el-button>
</template>

<script setup lang="ts">
import {
    
     useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const goBack = () => {
    
    
  router.go(-1);
};
</script>

<style lang="scss" scoped></style>

ここに画像の説明を挿入します

5. 命名、リダイレクト、エイリアシング

1. ネーミング

実際の開発では、特定のルートに複数のビューコンテナが存在する状況があります(<router-view>)。その場合、複数のビューコンテナを埋めるために複数のコンポーネントが必要になります。1 つを使用します。コンポーネントを含むビューコンテナ (router-view の name 属性)。

<router-view name="first"><router-view>
<router-view name="second"><router-view>
<router-view name="third"><router-view>
// ...... //

2. リダイレクト

上記の news インターフェイスの設定と同様に、redirect 属性を使用してルートをリダイレクトします。

{
    
    
    path: '/news',
    component: () => import('@/views/news/index.vue'),
    name: 'News',
    meta: {
    
     title: 'news' },
    redirect: '/news/animal', // 重定向
    children: [
      {
    
    
        path: 'animal',
        component: () => import('@/views/news/animal.vue'),
        name: 'AnimalList',
        meta: {
    
     title: 'animalList' }
      },
      {
    
    
        path: 'nature',
        component: () => import('@/views/news/nature.vue'),
        name: 'NatureList',
        meta: {
    
     title: 'natureList' }
      },
      {
    
    
        path: 'article/:id',
        component: () => import('@/views/news/article.vue'),
        name: 'Article',
        meta: {
    
     title: 'article' }
      }
    ]
  }

3. ルーティングエイリアス

エイリアス設定には alias 属性を使用します。

// 绝对路径别名配置
{
    
     path: 'aaa', component: AAA, alias: '/aaa-alias' },
// 相对路径别名配置 (指向 /home/bar-alias) 
{
    
     path: 'bbb', component: BBB, alias: 'bbb-alias' },
// 多别名配置
{
    
     path: 'ccc', component: CCC, alias: ['/c1-alias', 'c2-alias'] },

6. ルーティングパラメータ

vue には、props、eventBus など、パラメータを渡す多くの方法があります。ルーティングもパラメータを渡す重要な方法です。インターフェースを使用します。印刷routeしてルートのプロパティを表示します。

ここに画像の説明を挿入します

vue-router のルーティングコンポーネントでパラメータを渡す主な方法は次のとおりです。

ルーティングパラメータ（Route Parameters）: ルーティングパスでパラメータを定義し、コンポーネントの $route.params を通じてパラメータにアクセスします。パラメータをオブジェクトの形式で渡します。パラメータを渡すには params を使用します。ルートは name によってのみ導入できます。path として記述した場合、ページに警告が表示されます。上記のパラメータは無視され、 params は post リクエストと同等であり、パラメータはアドレスバーに表示されません。
クエリパラメータ（Query Parameters）: ルーティングパスの後にクエリパラメータを追加することでパラメータを渡し、コンポーネントの $route.query を通じてアクセスできます。この方法では、 url 以降のパラメータを結合し、 ? 以降のパラメータを & 文字、< で区切ります。 / a> リクエストに相当し、パラメータはアドレスバーに表示されます。 query は get
ルーティングメタ情報（Route Meta Fields）: ルーティング設定で meta フィールドを定義し、 $route.meta を渡すことができます。コンポーネントへのアクセス。このメソッドは、ページタイトル、権限などの追加情報をルーティングレベルで渡すのに適しています。

強調すべき点が 1 つあります: params パラメータを渡して更新することは無効になりますが、 query は渡されたパラメータ更新後も値は変更されません。 params を使用して query パラメータを渡してデータを永続化することをシミュレートしたい場合は、 <それを達成するには、 a i=6> を実行します。 loaclStorage

7. さまざまな歴史的モデル

1. ハッシュモード

hash パターンは createWebHashHistory() で作成されます。内部的に渡される実際の URL の前にハッシュ文字 (#) が使用されます。この部分 URL はサーバーに送信されることはないため、サーバーレベルでの特別な処理は必要ありません。ただし、 SEO には悪影響があります。この問題が心配な場合は、html5 モードを使用できます。

2.html5モード

html5 パターンは createWebHistory() で作成されており、推奨されます。この履歴モードを使用すると、 URL は https://example.com/user/id のように「通常」に見えます。

しかし、ここで問題が発生します。このアプリケーションはシングルページのクライアントアプリケーションであるため、適切なサーバー構成がないと、ユーザーがブラウザで https://example.com/user/id に直接アクセスすると、 404 エラーが発生します。。この問題を解決するには、単純なフォールバックルートをサーバーに追加するだけです。 URL がどの静的リソースにも一致しない場合は、アプリケーション内の index.html と同じページを提供する必要があります。

3. 2 つのモードの違い

hash パターンと html5 パターンはどちらもフロントエンドルーティングの実装です。 hash モードでは、ルーティング情報は URL のハッシュ部分 (つまり # 記号の後) に格納されますが、 html5 モードの場合、URL のパス部分にルーティング情報が直接表示されます。 2 つのモードは次の点で異なります。

互換性:hash モードは、サーバー側で特別な構成を必要とせず、最新のブラウザをすべてサポートしているため、互換性が高くなります。 html5 モードにはサーバー側の構成が必要で、新しいブラウザでのみ完全にサポートされます。
美しさ: html5 パターンの URL は、# 番号がなく、より似ているため、より美しくなります。伝統的なURL構造。対照的に、 hash パターンの URL には # 数値が含まれるため、視覚的に明確で美しくない可能性があります。
404 エラー処理: html5 モードで、ユーザーがフロントエンドルーティングを含む URL に直接アクセスする場合、バックエンドサーバーは404错误 を回避するために、それに応じて設定されています。 hash モードでは、ルーティング情報がハッシュ部分にあり、サーバーからは見えないため、この処理は必要ありません。

4.ルートガード

1. 完全なナビゲーション分析プロセス

ナビゲーションがトリガーされます。
非アクティブ化されたコンポーネントを呼び出す beforeRouteLeave Guard
グローバル beforeEach ガードを呼び出す
再利用されたコンポーネントで beforeRouteUpdate ガードを呼び出す
ルーティング設定で呼び出されますbeforeEnter
非同期ルーティングコンポーネントを解析する
アクティブ化されたコンポーネントで呼び出されますbeforeRouteEnter
グローバル beforeResolve ガードを呼び出す
航行確認済み
グローバル afterEach フックを呼び出す
触发 DOM 更新
ガード beforeRouteEnter の next に渡されたコールバック関数を呼び出します。作成されたコンポーネントインスタンスは、コールバック関数のパラメータとして渡されます。あ>

2. グローバルフロントガード

router.beforeEach を使用してガードの前にグローバルを登録します

const router = createRouter({
    
     ... })

router.beforeEach((to, from) => {
    
    
  // ...
  // 返回 false 以取消导航
  return false
})

ナビゲーションがトリガーされると、グローバルフロントガードが作成順に呼び出されます。ガードは非同期で実行され、ナビゲーションはすべてのガードがresolve完了するまで待機します。

一般的な使用法はログイントークンのインターセプトです。

import {
    
     createRouter, createWebHistory } from 'vue-router'
import {
    
     ElMessage } from "element-plus";
import {
    
     constantRoutes } from './route'
import {
    
     Local } from '@/cache'

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

/**
 * 全局前置路由守卫，每一次路由跳转前都进入这个 beforeEach 函数
 */
router.beforeEach((to, _from, next) => {
    
    
  if (to.path == '/login') {
    
    
    // 登录或者注册才可以往下进行
    next();
  } else {
    
    
    // 获取 token
    const token = Local.get('token');
    // token 不存在
    if (token === null || token === '') {
    
    
      ElMessage.error('登录失败，请先登录');
      next('/login');
    } else {
    
    
      next();
    }
  }
});

export default router

ここではローカルストレージを使用してトークンを取得します。対応するキャッシュ部分のコードは次のとおりです。

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
    
    
  // 设置永久缓存
  set(key: string, val: any) {
    
    
    window.localStorage.setItem(key, JSON.stringify(val));
  },

  // 获取永久缓存
  get(key: string) {
    
    
    let json: any = window.localStorage.getItem(key);
    return JSON.parse(json);
  },

  // 移除永久缓存
  remove(key: string) {
    
    
    window.localStorage.removeItem(key);
  },

  // 移除全部永久缓存
  clear() {
    
    
    window.localStorage.clear();
  },
};

/**
 * window.sessionStorage 浏览器临时缓存
 * @method set 设置临时缓存
 * @method get 获取临时缓存
 * @method remove 移除临时缓存
 * @method clear 移除全部临时缓存
 */
export const Session = {
    
    
  // 设置临时缓存
  set(key: string, val: any) {
    
    
    window.sessionStorage.setItem(key, JSON.stringify(val));
  },

  // 获取临时缓存
  get(key: string) {
    
    
    let json: any = window.sessionStorage.getItem(key);
    return JSON.parse(json);
  },

  // 移除临时缓存
  remove(key: string) {
    
    
    window.sessionStorage.removeItem(key);
  },

  // 移除全部临时缓存
  clear() {
    
    
    window.sessionStorage.clear();
  },
};

3. グローバル分析ガード

router.beforeResolve を使用してグローバルガードを登録できます。これは、すべてのナビゲーションで起動されるという点で router.beforeEach に似ていますが、ナビゲーションが確認される直前、およびすべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後に解決ガードが呼び出される点が異なります。

router.beforeResolveユーザーがページに入れない場合に避けたいデータの取得やその他の操作を実行するのに最適な場所です。詳細については、公式 Web サイトを参照してください。

4. グローバルポストフック

を使用してafterEach グローバルポストフックを登録できます。ただし、ガードとは異なり、これらのフックは next 関数を受け入れず、ナビゲーション自体を変更しません。

afterEach フック関数では、to と from の 2 つのパラメータにアクセスでき、それぞれターゲットを表します。移動先のルートと現在のルート。

使用afterEach フック関数を使用すると、ルーティングナビゲーションが完了した後のビジネスロジック (ページアクセス統計、ページ読み込み時のプログレスバーコントロールなど) を簡単に処理できます。

router.afterEach((to, from) => {
    
    
  doSomething(to.fullPath)
})

5. 配線専用ガード

ルート設定でbeforeEnterガードを直接定義できます。

const routes = [
  {
    
    
    path: 'article/:id',
    component: () => import('@/views/news/article.vue'),
    beforeEnter: (to, from) => {
    
    
      return false
    },
  },
]

beforeEnter ガードはルートに入るときにのみ起動し、params、query、または hash が変更されたときは起動しません。たとえば、/article/1 から /article/2 または /article/1#title から /article/1#detail です。これらは、別のルートから移動する場合にのみトリガーされます。

6. コンポーネント内のガード

ルートナビゲーションガードは、ルーティングコンポーネント内で直接定義できます (ルーティング設定に渡されます)。

API 構成:

beforeRouteEnter
ルート更新前
前ルート出発

const UserDetails = {
    
    
  template: `...`,
  beforeRouteEnter(to, from) {
    
    
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    
    
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    
    
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

5. 動的ルーティング

1. ルーティングを追加する

動的ルーティングは主に 2 つの機能によって実装されます。 router.addRoute() と router.removeRoute()。新しいルートが登録されるだけです。つまり、新しく追加されたルートが現在の場所と一致する場合は、 router.push() または router.replace() を使用して手動で移動する必要があります。新しいルート。

公式ウェブサイトの例:

const router = createRouter({
    
    
  history: createWebHistory(),
  routes: [{
    
     path: '/:articleName', component: Article }],
})

router.addRoute({
    
     path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)
// 如果你需要等待新的路由显示，可以使用 await router.replace()

2. ルートを削除する

既存のルートを削除するには、いくつかの方法があります。

名前が競合するルートを追加する。既存のルートと同じ名前のルートを追加すると、ルートは最初に削除されてから追加されます。

router.addRoute({
    
     path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({
    
     path: '/other', name: 'about', component: Other })

router.addRoute() を呼び出すことによって返されるコールバック:

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
当路由没有名称时，这很有用。

router.removeRoute() を使用して、名前でルートを削除します。

router.addRoute({
    
     path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

この機能を使用したいが、名前の競合を避けたい場合は、ルート内の名前として Symbol を使用できることに注意してください。

ルートが削除されると、すべてのエイリアスとサブルートも削除されます。

3. ネストされたルーティングを追加する

ネストされたルートを既存のルートに追加するには、ルートの name を最初の引数として router.addRoute() に渡します。これにより、あたかも効果的にルートが追加されます。 children 経由で追加されました。

公式ウェブサイトの例:

router.addRoute({
    
     name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', {
    
     path: 'settings', component: AdminSettings })

次のコードと同等

router.addRoute({
    
    
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{
    
     path: 'settings', component: AdminSettings }],
})

4. 既存のルートを表示する

Vue Router既存のルートを表示するために 2 つの関数が提供されています。

router.hasRoute()：ルートが存在するかどうかを確認します。
router.getRoutes(): すべてのルーティングレコードを含む配列を取得します。

6. その他の構成

1. ルーティングメタ情報

Vue.js では、ルートメタ情報はルートに関連する追加情報であり、ルートオブジェクトで定義できます。ルーティングメタ情報は通常、ページタイトル、必要な権限、ページカテゴリなど、ルーティングに関連する追加データを保存するために使用されます。

Vue Router でルートメタ情報を使用するには、ルート設定内の各ルートオブジェクトに meta フィールドを追加し、ルートナビゲーション中にアクセスします。このメタ情報については、上で meta 属性を広範囲に使用しました。

簡単なコードのデモ:

const routes = [
  {
    
    
    path: '/home',
    component: Home,
    meta: {
    
     requiresAuth: true, title: '首页' } // meta 信息
  },
  {
    
    
    path: '/about',
    component: About,
    meta: {
    
     title: '关于我们' } // meta 信息
  }
]

const router = new VueRouter({
    
    
  routes
})

router.beforeEach((to, from, next) => {
    
    
  // 访问元信息
  const pageTitle = to.meta.title
  document.title = pageTitle || '默认标题'

  // 检查权限
  if (to.meta.requiresAuth && !isAuthenticated()) {
    
    
    next('/login')
  } else {
    
    
    next()
  }
})

上記の例では、2 つのルートに異なるメタ情報を追加し、グローバル beforeEach ナビゲーションガードでこのメタ情報にアクセスしました。 beforeEach ガード内のルーティングメタ情報を削除して、ページのタイトルを動的に設定したり、ユーザーの権限やその他の操作を確認したりできます。

2. ルートの遅延読み込み

Vue.js では、ルーティングの遅延読み込みは、ルーティングコンポーネントをオンデマンドで読み込むことで初期読み込み時間を短縮するのに役立つ最適化手法です。 vue-router アプリケーションのパフォーマンスと速度を向上させるために、ルート遅延読み込みを使用したルーティングコンポーネントの非同期読み込みをサポートします。

ルーティングで遅延読み込みを使用するには、動的インポート構文を使用してコンポーネントを非同期的に読み込みます。

簡単なコードのデモ:

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const routes = [
  {
    
    
    path: '/foo',
    component: Foo
  },
  {
    
    
    path: '/bar',
    component: Bar
  }
]

動的インポート構文import()を使用して、Foo コンポーネントと Bar コンポーネントを読み込みます。ルートにアクセスすると、初期ロード時にすべてのコンポーネントをロードするのではなく、対応するコンポーネントがロードされます。これにより、アプリケーションの読み込みが速くなり、初期読み込み時に必要なリソースが削減されます。

3. 型付きルーティング (新機能: v4.1.0+)

Vue.js では、バージョン vue-router 4.1.0 以降、型指定ルーティングがサポートされています。型付きルーティングを使用すると、コンパイル段階でルートを型チェックして、コードの信頼性と保守性を向上させることができます。

型付きルーティングを使用するには、TypeScript や Flow などの静的型チェックツールを使用し、以下の手順に従って設定します。< /span>

ルーティング構成を定義する

// router.ts
import {
    
     createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  // 更多路由定义
]

const router = createRouter({
    
    
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

ルートタイプの定義

// routes.d.ts
import {
    
     RouteRecordRaw } from 'vue-router'

declare module 'vue-router' {
    
    
  interface RouteMeta {
    
    
    requiresAuth?: boolean
  }
}

declare module 'vue-router' {
    
    
  interface RouteMeta {
    
    
    title: string
  }
}

コンポーネントでルーティングを使用する

<template>
  <router-link :to="{ name: 'Home' }">Home</router-link>
  <router-view></router-view>
</template>

<script lang="ts">
import {
    
     defineComponent } from 'vue'

export default defineComponent({
    
    
  // 组件逻辑
})
</script>

TypeScript を通じてルーティング設定を定義し、モジュール拡張機能を使用してルーティングメタ情報のタイプを定義します。このようにして、ルーティングの型チェックをコンパイル時に実行できるため、スペルエラーや型の不一致によって引き起こされるエラーが減り、コードの信頼性が向上します。

要約する

この記事では、vue-router の各属性について詳しく説明し、コード例を使用して詳細に示して、包括的な理解を提供します。この記事を読むと、 vue-router の中核となる概念と機能をよりよく理解できるようになります。上記の構成コードは、 github ウェアハウス、ウェアハウスパス: https://github.com/SmallTeddy に直接copy置くことができます。 /music-explorer-web。