前端の路由

記事のディレクトリ

コンテンツの概要

ルーティングを知っている
vue-routerの基本的な使用法
vue-routerネストルーティング
Vue-routerパラメーターの受け渡し
vue-routerナビゲーションガード
生き続ける

1.ルーティング

ここに画像の説明を挿入

ルーティングマッピングテーブルは、イントラネットのIPアドレスを一意のコンピューターのMACアドレスにマップします。
ルーティングテーブルの本質は、データパケットの方向を決定するマッピングテーブルです。

1.フロントエンドレンダリングとバックエンドレンダリングの違い

現在の開発はjs + html + cssを使用することですが、初期にはjsのようなコードはありませんでした。レンダリングの直後にバックエンドでコードを渡し、次にそれをフロントエンドに渡します。言い換えれば、彼がフロントエンドに渡すのはすでにhtml + cssです。

ここに画像の説明を挿入

1.バックエンドレンダリングとバックエンドルーティング：

ルーティングアドレスとテーブルの間の1対1の対応はバックエンドによって完了され、このルーティング方法はバックエンドルーティングと呼ばれます。
バックエンドルーティングは、バックエンドプログラマー独自のロジックjavaまたはphpを使用して、htmlWebページにデータをネストします。

ここに画像の説明を挿入

フロントエンドレンダリング（ajaxを使用した後、jsを介してデータベースにアクセスできます。）

ここに画像の説明を挿入

SPAページ：

スパシングルページリッチアプリケーション

実際、静的リソースサーバーに初めてリクエストを送信するときは、すでにすべてのhtml + css Webページを持ってきているため、ルートをクリックするたびに、バックエンドにリクエストを送信することはありません。インターフェイスを変更するだけで、この種のルーティングはフロントエンドルーティングと呼ばれます。

ここに画像の説明を挿入

2. URLを変更する方法、ページが更新されない

テクニックの1つは、ハッシュを変更してURLを変更することです。現時点では、ページは更新されません。

location.hash='aaa'

3.フロントエンドルーティングを構成します

ここに画像の説明を挿入

import Vue from 'vue'

//导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)


// 把 Router 实例导出。
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

4.フロントエンドルーティングを構成します

import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//导入路由
import Router from 'vue-router'


// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)


// 把 Router 实例导出。
export default new Router({
    
    
  routes: [
    // {
    
    
    //   // path: '/',
    //   // name: 'HelloWorld',
    //   // component: HelloWorld
    // },
    {
    
    
      path: "/home",
      component: Home
    },
    {
    
    
      path: "/about",
      component: About
    }
  ]
})

2つのタグを認識します。

<router-link to >これはルーティングアドレスにちなんで名付けられており、router-viewこのルートを表すために使用されたルーティングエクスポートは任意の場所に表示される必要があります。

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    
     <!-- 相当于在显示的地方占个位置 -->
    <router-view></router-view>
  </div>
</template>

5.デフォルトルートを設定します

毎回Webページにアクセスする場合は、[ホーム]をクリックしてホームにジャンプするたびに非常に便利です。したがって、ルートを構成して、デフォルトのホームページにジャンプできるようにする必要があります。

これをルートに追加します

{
    
    
      //打开的时候，默认重定向
      path: '',
      redirect: '/home' //重定向
    },

ルーティングアドレスは、使用時に＃キーが付きます。これは、ハッシュメソッドがデフォルトで使用されており、履歴メソッドに変更できるためです。コードは次のように表示されます。

ルーティングインスタンスを構成するときは、もう1つのパラメーターを渡します。

ここに画像の説明を挿入

6.router-linkの関連属性を変更します

デフォルトでは、router-linkはタグのスタイルですが、buttonなどのタグに置き換えることもできます。同時に、クリックしたときの色の効果を変更することができます。具体的なコードは次のとおりです。

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
     
     
  name: 'App'
}
</script>

<style>
/* 点击的时候变颜色 */
.router-link-active{
     
     
  color: brown;
}
</style>

7.動的パスパラメータ（動的ルーティング）

まず、動的ルーティングとは何かが明確です。動的ルーティングとは、クリックする人の違いに応じてルーティングアドレスを動的に表示することです。

ここに画像の説明を挿入

特定の実装については、コードを見てください。

1.最初にコンポーネントを構築します：ユーザー、ルートに彼を登録し、構造に注意を払います（使用：示す）

{
    
    
      path: "/user/:userId",
      component: User
    },

2.次に、APP表示インターフェイスで、スプライシング方法を使用して動的に表示します

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about">关于</router-link>

    //动态路由的拼接，是从 data 里面获取数据的
    <router-link :to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
     
     
  name: 'App',
  data(){
     
     
    return{
     
     
      userId:'zhangshan'
    }
  }
}
</script>

<style>
/* 点击的时候变颜色 */
.router-link-active{
     
     
  color: brown;
}
</style>

3.ビューレイヤーで、表示されているルートを表示します。

ルーターを挿入することで、どのコンポーネントでもthis.$routerルーターにthis.$routeアクセスでき、現在のルートにもアクセスできます。

<template>
  <div>
    <h1>我是用户界面</h1>
    <p>我是用户界面的内容，哈哈</p>

    <!-- 通过下边的 computed 的userId 方法,把路由里面的参数取出来 -->
    <h2>{
   
   {userId}}</h2>

    <!-- 也可以直接拿出来 -->
    <h3>{
   
   {$route.params.userId}}</h3>
  </div>
</template>

<script>
export default {
     
     
  name: "User",
  computed: {
     
     
    userId() {
     
     
      //  $route 就是拿到当前的处于活跃状态的路由
      return this.$route.params.userId;
    },
  },
};
</script>

<style  scoped>
</style>

4.注：自分でテストした後、中国の名前は常にルーターに表示されます

5.すべてのルートと404エラーページをキャプチャします

通常のパラメータは、/で区切られたURLフラグメント内の文字にのみ一致します。任意のパスに一致させる場合は、ワイルドカード（*）を使用できます。ワイルド
カードルーティングを使用する場合は、ルーティングの順序が正しいこと、つまり、ワイルドカードを使用したルーティングを最後に配置する必要があることを確認してください。ルーティング{ path: '*' }は通常、クライアント404に使用されます。履歴モードを使用する場合は、サーバーを正しく構成してください。

8.ルーティングの遅延読み込み

パッケージ化してアプリケーションを構築すると、Javascriptパッケージが非常に大きくなり、読み込みに影響します。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントを読み込むことができれば、それはさらに効率的です。

コード:(非常に単純）

ルーティングの例でモジュールをインポートする場合は、上記の表現を次の表現に変更するだけで済みます。

import About from '../components/About.vue'

const About=()=>import('../components/About.vue')

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

ルーティングのネストは、コンポーネント内のネストされたサブコンポーネント間の関係を示すために使用されます

注意。ルーティングに/を追加するかどうかには特定の要件があり、ランダムに追加されることはありません。

ステップ：

対応するサブコンポーネントを作成し、ルートマップで対応するサブルートを設定します。
ルーティングコンポーネントで<router-view>を使用し、ラベルを付けます

サブコンポーネントを作成する

サブコンポーネントの名前は、親子関係を示す必要があることに注意してください。

ルート内のコンポーネントを参照してください。コードは次のとおりです。


const HomeMessage =()=>import("../components/HomeMessage.vue")
const HomeNews =()=>import("../components/HomeNews.vue")

// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)

// 把 Router 实例导出。
export default new Router({
    
    
//把更改hash 值得写法，更改为 history 的写法， 就没有了 #
  mode: 'history',
  routes: [
    {
    
    
      //打开的时候，默认重定向
      path: '',
      redirect: '/home' //重定向
    },
    {
    
    
      path: "/user/:userId",
      component: User
    },
    {
    
    
      path: "/home",
      component: Home,
      children:[
        {
    
    
          path:'',
          redirect:'news'
        },
        {
    
    
          path:'news',
          component:HomeNews
        },
        {
    
    
          path:'message',
          component:HomeMessage
        }
      ]
    },
    {
    
    
      path: "/about",
      component: About
    },]})

<router-view>タグを追加します

ここでのルーティングは、完全なルーティングアドレスを書き込む必要があることに注意してください。

<template>
  <div>
      <h2>我是Home，哈哈</h2>
      <p>我是内容，哈哈</p>

      <br>
      <router-link to="/home/news">新闻</router-link>
      <router-link to="/home/message">消息</router-link>
      <router-view></router-view>
  </div>
</template>

X.グローバルナビゲーションガード

この機能の特定の機能は、グローバルナビゲーションガードを使用することです。異なるコンポーネントを切り替えるときに、コンポーネントの名前をルート上に動的に表示できます。

11.vue-router-keep-alive

ライフサイクルを理解するためのコードは次のとおりです。

<script>
export default {
    
    
  name: "Home",
  data() {
    
    
    return {
    
    };
  },

  // 创建的时候调用
  created() {
    
    
    console.log("created");
  },

  // 销毁的时候，调用
  destroyed() {
    
    
    console.log("destroyed");
  },
};
</script>

その結果、インターフェイスがジャンプすると、さまざまなライフサイクル関数が表示され、対応する関数が呼び出されます。

実現すべき具体的な機能：対応するウェブページをクリックした後、戻ってきたとき、ページは今でも元の状態で保存されています。

ここに画像の説明を挿入

ラベルに直接ルートを表示し、さらに<keep-alive>次のことができます

  <keep-alive>
      <router-view />
  </keep-alive>

12.ルーティングとパラメータ転送

<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>

サブコンポーネントに入る

this.$route.params.id

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

別のURLに移動したい場合は、このrouter.push方法を使用してください。このメソッドは履歴スタックに新しいレコードを追加するため、ユーザーがブラウザの[戻る]ボタンをクリックすると、前のURLに戻ります。

をクリックすると<router-link>、このメソッドが内部的に呼び出されるため、クリックすることは。<router-link :to="...">を呼び出すことと同じrouter.push(...)です。

最初にルートを作成します

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

名前付きコンポーネントを介してパラメーターを渡す

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

上記のコードと以下のコードは同じ意味です。

router.push({
    
     name: 'user', params: {
    
     userId: 123 }})

router.go（n）の使用法

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

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

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)