Vue ルーティングについて詳しく説明した記事: vue-router

この記事では、FamilyBucket の Vue Vue-Router について詳しく説明し、ルーティングの知識を学びます。

フロントエンド ルーティングの開発の歴史

ルーティングの概念はソフトウェア エンジニアリングで登場し、最初にバックエンド ルーティングで実装されました。エンド ルーティングの理由は、Web の開発が主に次の段階を経てきたためです:

• バックエンド ルーティング段階;
• フロントエンドとバックエンドの分離段階;
• シングル ページ リッチ アプリケーション (SPA) );

1. バックエンド ルーティング ステージ

初期の Web サイト開発 HTML 全体ページは サーバーによってレンダリングされます。つまり、サーバーは対応する HTML ページを直接生成してレンダリングし、それを表示のためにクライアントに返します。図に示すように:

利点: SEO の最適化に役立つ

欠点: ページ全体がバックエンド担当者によって維持され、HTMl コードとデータに対応するロジックが混在して書かれることになり、メンテナンス性が非常に悪いです。

2. フロントエンドとバックエンドの分離

**フロントエンド レンダリング:**各リクエストに含まれる静的リソースは、静的リソースから取得されます。リソース サーバーの場合、これらのリソースには HTML CSS JS が含まれており、これらのリクエストによって返されたリソースがフロントエンドでレンダリングされます。クライアントからのすべてのリクエストは、静的リソース サーバーからのファイルをリクエストします。現時点では、バックエンドは API

を提供する責任を負っています。

フロントエンドとバックエンドの分離:

バックエンドは API の提供のみを担当し、フロントエンドはデータを取得しますAjax を介して、JavaScript を介してデータをページにレンダリングします

• バックエンドはデータに重点​​を置き、フロントエンドはインタラクションと視覚化に重点を置きます
• ##単一ページ (SPA) ) リッチ アプリケーション ステージ:

フロントエンドとバックエンドを分離するフロントエンド ルーティングの層が に基づいて追加されます。フロントエンドは、一連のルーティング ルール

• 核心: ページ URL を変更しますが、ページは更新しません。
#vue-router について知る

Vue-Router をインストールする

npm install vue-router

手順:

マッピングする必要があるルーティング コンポーネントを作成する [関連する推奨事項:

vue ビデオ チュートリアル

]

• createRouter を通じてルーティング オブジェクトを作成し、routes と履歴モード

• #アプリを使用してルーティング オブジェクトを登録する (メソッドを使用)

ルートの使用法: およびおよび

import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 创建一个路由：映射关系
const router = new createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
})

export default router

補足:route のその他の属性

name 属性: ルートの一意の名前を記録します ;

メタ属性: カスタム データ

router-link (補足)

router-link実際には、設定できるプロパティが多数あります。

to 属性: 文字列またはオブジェクトです

replace 属性: replace 属性が設定されている場合、クリックすると、router.replace( ) が代わりに呼び出されます。一般に、replace 属性は使用されず、ユーザー エクスペリエンスはあまり良くありません。

active-class 属性: a 要素をアクティブ化した後に適用されるクラスを設定します。デフォルトは router-link-active です。

• exact-active-class 属性: リンクが正確にアクティブ化されると、 rendering. クラスに適用され、デフォルトは router-link-exact-active;
• ルート遅延読み込み
• 問題: アプリケーションをパッケージ化してビルドするとき、 JavaScript パッケージが非常に大きくなり、ページの読み込みに影響します。

解決策: 異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスするときに対応するコンポーネントを読み込みます。また、ファーストスクリーンのレンダリングの効率も向上します。このうち、Vue-Router はデフォルトでコンポーネントの動的ロードをサポートしています。コンポーネントはコンポーネント内で渡されるか、関数を受け取ることができるため、関数は Promise を戻す必要があります。 インポート関数は Promise を返します

動的ルーティング

1. 動的ルーティングの基本Match

指定された一致パターンのルートを同じコンポーネントにマップします。さまざまなニーズに応じてさまざまなルートをロードし、さまざまな実装やページ レンダリングを実現できます。

動的ルーティングの使用は、通常、ロール権限制御と組み合わせて使用​​されます。

例: すべてのユーザーに表示される User コンポーネントがありますが、ユーザーの ID は異なります。これを行うには、パス内の動的フィールド (パス パラメーターと呼びます) を使用します。次に、ジャンプを実装します。

2. 获取动态路由的值

获取动态路由的值(例如上面例子中 用户id 123)，在template中，直接通过 $route.params获取值。

• 在created中，通过 this.$route.params获取值
• 在setup中，我们要使用 vue-router库给我们提供的一个hook useRoute

3. NotFound

对于没有匹配到相应的路由，我们可以给用户匹配一个固定的页面。通过 $route.params.pathMatch获取到传入的参数

路由的嵌套

组件的本身也有组件需要内部切换，这个时候就可以采用嵌套路由，在第一层路由中也使用router-view来占位之后需要渲染的组件。

{
      path: "/home",
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "/show",
          component: () => import("../views/component/show.vue")
        },
        {
          path: "/detail",
          component: () => import("../views/component/detail.vue")
        }
      ]
    },

编程式导航

1. 代码的页面跳转

通过代码来控制页面的跳转

栗子：点击一个按钮跳转页面

2. query 方式的参数

通过query的方式来传递参数，在界面中通过 $route.query 来获取参数。

3. 替换当前的位置

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换 操作，那么可以使用replace。这个时候已经不能回退了。

4. 页面的前后跳转

• router 的 go 方法（指定向前(向后)跳转几步）

• router 的back 方法 （回溯历史，向后一步）

• router 的forward 方法（历史中前进，向前一步）

动态添加路由

场景：根据用户的不同权限，注册不同的路由

补充：路由的其他方法

删除路由有以下三种方式：

• 方式一：添加一个name相同的路由；
• 方式二：通过removeRoute方法，传入路由的名称；
• 方式三：通过addRoute方法的返回值回调；

router.hasRoute()：检查路由是否存在。

router.getRoutes()：获取一个包含所有路由记录的数组。

路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

全局的前置守卫==beforeEach==是在导航触发时会被回调的,它有两个参数：

• to：即将进入的路由Route对象；
• from：即将离开的路由Route对象；

返回值：

• false：取消当前导航；
• 不返回或者undefined：进行默认导航；
• 返回一个路由地址：可以是一个String类型的路径也可以是一个对象

1. 登录守卫功能

场景：只有登录了的用户才能看到的页面

2. 其他导航守卫

Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予回调，可以更好的控制程序的流程或者功能

[导航守卫](导航守卫 | Vue Router (vuejs.org))

流程：

• 导航被触发。

• 在失活的组件里调用 beforeRouteLeave 守卫。

• 调用全局的 beforeEach 守卫。

• 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

• 在路由配置里调用 beforeEnter。  解析异步路由组件。

• 在被激活的组件里调用 beforeRouteEnter。

• グローバル beforeResolve ガード (2.5) を呼び出します。

• #ナビゲーションを確認しました。

• グローバル afterEach フックを呼び出します。

• DOM 更新をトリガーします。

• beforeRouteEnter ガードで next に渡されるコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメータとして渡されます。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がVue ルーティングについて詳しく説明した記事: vue-routerの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。