VueRouter4.xの使い方は？クイックスタートガイド

VueRouter4.x の使い方は?次の記事では、簡単なチュートリアルと、10 分で VueRouter4.x をすぐに使い始める方法を紹介します。

Vue Router は、Vue チームによって開発されたルーティング プラグインで、Vue.js のコアと深く統合されており、単一ページ プログラムの構築が非常に簡単になります。 Vue を使用する; Vue Router の最新バージョンは 4.X であり、Vue3 の推奨バージョンでもあります。この記事では、Vue Router 4.X について学習します。 (学習ビデオ共有: vue ビデオ チュートリアル)

URL.hash と History

には 2 種類の history## があります。 Vue Router # (ルーティングの履歴を記録)、それぞれ URL.hash と History が HTML5 で提供されます。

ハッシュ履歴は、ホストのない Web アプリケーション (

file:// など)、または構成サーバーが任意の URL を処理できない場合に便利ですが、ハッシュは SEO にとって非常に不十分です。

履歴 履歴は HTML5 で新しく追加されたもので、IE にはあまり適していませんが、Vue3 は IE を放棄したため、IE を考慮する必要はありません。現在、この方法が最も一般的な方法です。ただし、アプリケーションはhttp プロトコル経由で提供されます。

インストールと使用プロセス

最初に Vue Router をインストールします。コマンドは次のとおりです:

npm i vue-router

次に

main.js 次のコードを記述します。

import { createApp } from 'vue'
import App from './App.vue'
// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 2 定义路由映射表
const routes = [
  /* more router */
]
// 3 创建路由实例，并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

上記のコードに

routes が多すぎる場合は、router.js ファイルを定義して抽出できます。サンプルコードは次のとおりです:

router.js

export default [
  /* more router */
]

main.js

import { createApp } from 'vue'
import App from './App.vue'
// 2 引入路由映射表
import routes from './router'

// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 3 创建路由实例，并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

または **直接 *** *

router.js でルーティング インスタンスを直接エクスポートし、main.js**（この方法がより一般的に使用されます)。

#router-link と router-view

router-link

#

は Vue によって提供されるカスタム コンポーネントであり、リンクの作成に使用されます。ネイティブ <a></a> は、URL を変更するとリセットされるため、Vue では使用されません。ページを読み込みますが、<router-link></router-link> は読み込みません。<router-link></router-link> コンポーネントがサポートするプロパティの詳細については、ドキュメント#を参照してください。 ##。 router-view

##

コンポーネントは、次のコードのように、URL に対応するコンポーネントに使用されます。 # #

<template>
  <router-link to="/hello"
    ><img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" 
  /></router-link>
  <router-view></router-view>
</template>

この場合、router.js

コードは次のようになります:

import RootComponent from './components/root.vue'
export default [
  {
    path: '/',
    // 引入组件
    component: RootComponent
  },
  {
    path: '/hello',
    // 路由懒加载引入组件
    component: () => import('./components/HelloWorld.vue')
  }
]

他の設定項目については、ドキュメント

を参照してください。

コードの実行結果は次のとおりです。

ルーティング遅延読み込み

アプリケーションがより多くの機能を備えたものになると、 JavaScript コードが大きい場合、パッケージ化された JavaScript コードも特に大きくなります。このとき、アプリケーション全体をさまざまなブロックに分割する必要があります。Vue Router はこの機能をサポートしています。静的コードを置き換えるだけで済みます。上記のコードのような

component: () => import('./components/HelloWorld.vue')

その後、パッケージ化 (webpack、Vite) ツールは、次の図に示すように、これらの動的にインポートされたコンポーネントを個別にパッケージ化します。

##動的ルーティング

VueRouter を使用すると、ルーティング一致ルールを動的に設定できます。たとえば、

User

コンポーネントができました。とコンポーネントの内容が表示されます IDごとに表示内容が異なります 設定方法は

:パラメータ名 の形式で設定するだけです。

例:

{
  path: '/user/:id',
  component: () => import('@/components/User')
}

次のようにテンプレートにジャンプします:

<router-link to="/user/10010"></router-link>

または、useRouter が提供する push メソッドを使用します。例:

import { useRouter } from 'vue-router'
const {push} = useRouter()
push({
  path: '/user',
  params: { id: 10010 }
})
// 或者
let id = 10010
push('/user/' + id)

useRoute

フックを介してルーティング アドレスを取得できます。使用方法は

useRouter

と一致します。 すべてのルートを一致させる

VueRouter の動的ルーティングを使用すると、一致しないルートを一致させることができます。サンプル コードは次のとおりです。ルート 照合が失敗した場合、このルートが照合されます。 ルーティングのネスト

ここで、HelloWorld コンポーネントの下に 2 つのコンポーネントを保存し、2 つのコンポーネント間で切り替える必要があるという要件があります。 。

这个时候路由嵌套的就发挥作用了，其实路由嵌套比较简单，就是通过路由配置中的一个children属性来实现，示例代码如下：

HelloWorld.vue

<template>
  <h1>Hello World</h1>
  <div
    style="
      display: flex;
      justify-content: space-between;
      width: 240px;
      margin: 0 auto;
    "
  >
    <router-link to="about">about</router-link>
    <router-link to="user">user</router-link>
  </div>
  <router-view></router-view>
</template>

router.js

{
  path: '/hello',
  // 路由懒加载引入组件
  component: () => import('./components/HelloWorld.vue'),
  children: [
    {
      path: 'about',
      component: () => import('./components/about.vue'),
    },
    {
      path: 'user',
      component: () => import('./components/user.vue'),
    },
  ],
},

子组件比较简单，只有一个<h1></h1>标签，最终效果如下：

写在最后

这篇文章到这就结束了，总的来说比较简单没有什么太深入的东西，比较适合入门。

【相关视频教程推荐：vuejs入门教程、web前端入门】

以上がVueRouter4.xの使い方は？クイックスタートガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。