[Vue3] Vue-Router ルーティングとルーティング ナビゲーション ガード

フロントエンドとバックエンドの分離ステージのルーティング

• Ajax の出現により、フロントエンドとバックエンドが分離された開発モデルが登場
• バックエンドはデータを返す API を提供し、フロントエンドは Ajax を通じてデータを取得し、js を通じてページにレンダリングします。
• アドバンテージ。フロントエンドとバックエンドの責任を明確にする

シングルページのリッチなアプリケーションステージ

• SPAの最大の特徴は、フロントエンドとバックエンドの分離に基づいてフロントエンドルーティングの層を追加することです。
• つまり、フロントエンドは一連のルーティング ルールを維持します。
• コア、URL の変更中にページ全体が更新されない

フロントエンドルーティングはどのようにして URL とコンテンツのマッピングを実現しますか?

• URL の変更をリッスンする

URLのハッシュ

• URl のハッシュはアンカー ポイント (#) であり、基本的に window.location 属性と href 属性を変更します。
• location.hash を直接割り当てることで、href を変更できます (ただし、ページは更新されません)。

URLの歴史

• HTML5 で追加され、ページを更新せずに URL を変更する 6 つのモードがあります
• replaceState、元のパスを置き換えます
• PushState、新しいパスを使用
• PopState、パスのフォールバック
• 行く、進路を前後に変える
• 進む、進む道を変える
• 戻る、パスを後方に変更する

Vue-Routerの基本的な使い方

• Vue-Router を使用したシングル ページ アプリケーション (SPA) の構築
• 1. ルーティングオブジェクトを作成する
• 2. マッピング関係を確立する
• 3. ルーティング オブジェクトを有効にします。
• 4.ルーターを取り付ける
• 5、ルータービューの占有場所
• 6、ルーターリンクルーティングスイッチング

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

npm install vue-router

2.新規ページのルーターファイル配下にindex.jsを作成、ルート、ページをインポート、ルートをインポート、ルーティング関係を作成

• createWebHashHistory: # パスを含む /#/order/detail など、ハッシュ モードでのルーティングを指します。
• createWebHistory: HTML5 ネイティブ履歴 API に基づくルーティング
• createMemoryHistory: SSR シナリオに適したメモリ情報に基づいてルーティングを暗黙的に管理します。

import {
    
     createRouter,createWebHashHistory  } from 'vue-router'
//导入
import Home from "../Views/home.vue"
import About from "../Views/about.vue"
//创建路由对象,//建立映射关系
const router = createRouter({
    
    
    history:createWebHashHistory (),//用于指定采用的模式。目前式哈希模式
    routes: [
    	//一般开发里面都会写一个重定向的路径
       {
    
    
            path: '/', redirect: "/home"
        },
        {
    
    
            path: '/home', component: Home
        },
        {
    
    
            path: '/about', component: About
        }
    ]
})

//导出
export default router

3，main.js

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

//再次导入,告诉app，注意这里的使用方式
import router from './router/index'
createApp(App).use(router).mount('#app')

3. app.vue 内

<template>
  <p>标题</p>
  <router-view></router-view>
  <div class="nev">
    <router-link to="Home">Home</router-link>
    <router-link to="about">about</router-link>
  </div>
</template>
<script setup>
</script>

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ルーターリンク属性

• 1. replace 属性、replace 属性は履歴に存在しません。

<router-link to="Home" replace>Home</router-link>

• 2. to 属性には文字列またはオブジェクトを指定できます。

<router-link to="Home" replace>Home</router-link>
<router-link :to="{path:'/about'}">about</router-link>

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

.router-link-active{
    
    
  color :blue;
}

• 4，exact-active-class属性
• リンクが正確にアクティブ化されている場合、レンダリングに使用されるクラス、デフォルトは router-link-exact-active

遅延ロードサブパッケージ処理のルーティング

• 最初の画面のレンダリング効率を向上させることができます

//如果想要分包
const Home=()=>import("../Views/hone.vue")
const About=()=>import("../Views/about.vue")

ルートのその他のプロパティ

• name 属性、ルーティング レコードの一意の名前。ページがジャンプするときにジャンプする名前を指定できます。
• メタ属性、カスタム属性を入れる
  

動的ルーティングとルーティングのネスト

1. 動的ルーティングの基本的なマッチング

• 例: コンポーネント ページがあり、ユーザーは入力するためにユーザー ID を渡す必要がありますが、ID が異なります。
• したがって、vue ルーターでは、パスパラメータと呼ばれる、パス内の動的フィールドを使用してそれを実現できます。
• /:パラメータ
  

2.vueページで渡されたパラメータを取得したい場合

• テンプレに入れてみる

<template>
  <div><p>about的参数{
    
    {
    
    $route.params.id}}</p></div>
</template>

• Vue2のAPIで取得します

 this.$route.params.id

• Vue3のAPIで取得します
• ただし、欠点もあります。前後の印刷の切り替えは 1 回しか実行されません。

<script setup>
  import {
    
    useRoute} from "vue-router"
  //获取router跳转的id
  const route = useRoute()
  console.log(route.params.id)
</script>

• 解決策: vue3 でルーティング ルーターの変更を監視したい
• 現在の位置が更新されようとしているときに起動するナビゲーション ガードを追加します。

<script setup>
  import {
    
    onBeforeRouteUpdate} from "vue-router"
  //获取router跳转的id
  onBeforeRouteUpdate((to,from)=>{
    
    
    console.log(to,from)
    console.log("form",from.params.id)
    console.log("to",to.params.id)
  })
</script>

加工されていない

• ユーザーがページを一致できないようにしたい場合は、次のコンポーネントが自動的に表示されます
  
  
  

• パスを解析したい場合は、パスの後に * を追加して配列に解析します。
  
  

ルートのネストされた使用

• / で始まるネストされたパスはルート パスとして扱われることに注意してください。これにより、ネストされた URL を使用せずにコンポーネントのネストを利用できるようになります。
• 1.ルーティングの最初の層にchildren[]属性を追加します。

 {
    
    
            name: "home",
            path: '/home',
            component: Home,
            children: [
                {
    
    
                    path: '/about',
                    component: About
                }
            ]
        },

• 2、ホームコンポーネントを追加します

 <router-view></router-view>

• 3、ルートジャンプ

ルーティングのためのプログラムによるナビゲーション

ナビゲーション、ルーター.プッシュメソッド

クエリデータの受信

router.replace() メソッド、現在のページを置き換えます

router.back(n) メソッド、前のページ、または n ページに戻る

router.forward(n) メソッドは 1 ステップ、つまり n ステップ進みます。

router.go(n)、ページ送りまたはページ戻し、n は正または負です

History.back()、履歴のバックトラックは router.go(-1) と同等です

History.forward()、履歴内での forward は router.go(1) と同等です。

ルーティングオブジェクトを動的に管理する

ルートを動的に追加する

• 使用するシーン
• たとえば、異なるユーザー権限に従って、異なるルートを登録します。
• このとき、addRouteメソッドを使用できます。
• 以下のように、許可がある場合はルートを追加します

let isAdmin = true
if(isAdmin){
    
    
    router.addRoute({
    
    
        path:"/Admin",
        component:Admin
    })
}

子ルートを動的に追加する

• router.addRoute(親名, ルート)
• ここで、parentName は、親ルートによって定義された名前フィールドです。
• 注: サブルーティング パスの前に「/」を追加しないでください。
• また、親ルートにはプレースホルダーのルータービューが必要であることにも注意してください。

let isAdmin = true
if(isAdmin){
    
    
    router.addRoute({
    
    
        name:"Admin",
        path:"/Admin",
        component:Admin
    })
    router.addRoute('Admin',{
    
    
        path:"Adminchild",
        component:Adminchild
    })
}

ルート 1 を削除する

• 同じ名前のルートを追加すると、後者は前のルートをオーバーライドできます。これは、前のルートを削除するのと同じです。
  

ルート削除方法2

• RemoveRoute メソッドを通じて、ルート名を渡します

router.removeRoute('home')

ルート削除方法3

• addRouteに格納されているオブジェクト

const delrouter = router.addRoute({
    
    
    name: "home",
    path: '/home',
    component: Home,
    children: [
        {
    
    
            path: '/about',
            component: About
        }
    ]
})
delrouter()

オブジェクトをルーティングするその他の方法

ルートが存在するかどうかを確認する

• router.hasRoute

ルーティング オブジェクト内のマッピングされたすべてのルーティング オブジェクトを取得します

• router.getRoutes()

console.log(router.getRoutes())

コンパイル警告

ルーティング ナビゲーション ガード

フロントナビゲーションガード

• vue-router が提供するナビゲーション ガードは、主にジャンプやキャンセルによってナビゲーションをガードするために使用されます。
• ナビゲーションがトリガーされると、グローバル プレガード beforeEach がコールバックされます。

• 2 つのパラメータがあります

• to: これから入ろうとするルートオブジェクト
• from: 出発しようとしているルート オブジェクト
• 次に、オプションの 3 番目のパラメータもあります。これは、vue2 でジャンプ方法を決定するために使用されます。

• 戻り値があります

• false、現在のナビゲーションをキャンセルします
• 返さない、または未定義、デフォルトのナビゲーション
• ルーティングアドレスを返す

• 文字列型のパスを指定できます

• パス、クエリ、パラメータ、その他の情報を含むオブジェクトにすることができます。

// 路由导航拦截
// - 进行任何的路由跳转之前，传入到beforeEach中的函数都会被回调
router.beforeEach((to,from)=>{
    
    
    //不写条件会在登录页陷入死循环
    if(to.path!='/login'){
    
    
        return "/login"
    }
})

• 一般的な使用シナリオ
• ホームページに入る前に、ユーザーがログインしているかどうかを確認してください

// 路由导航拦截
router.beforeEach((to, from) => {
    
    
    const token = localStorage.getItem("token")
    if (!token && to.path == '/home') {
    
    
        return "/login"
    }
    return undefined//否则默认导航
})

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

• 1. ナビゲーションがトリガーされます
• 2. 非アクティブ化されたコンポーネントで beforeRouteLeave() ガードを呼び出します。
• 3. グローバル beforeEach() ガードを呼び出します
• 4. 再利用されたコンポーネントで beforeRouteUpdate() ガードを呼び出します。コンポーネント インスタンスは使用できません。
• 5. ルーティング設定で beforeEnter() を呼び出します。
• 6. 非同期ルーティングコンポーネントを解析します ()=>import(…/xxx)
• 7. アクティブ化されたコンポーネントで beforeRouterEnter() を呼び出します。
• 8. コンポーネントが解析された後、ジャンプの前にグローバル beforeReasolve() を呼び出します。
• 9. ナビゲーションが確認されました
• 10. グローバルの afterEach() フックを呼び出します。
• 11. DOM 更新のトリガー
• 12. beforeRouteEnter() ガードで next に渡されたコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメータとして渡されます。