Vue Learning Journey Part9：vue-routerを使用してフロントエンドのルーティングとパラメーターを渡す

1.コンセプト

1.ルーティングとは

簡単に言えば、ルーティングはURLから関数へのマッピングです。
訪問したURLは対応する関数にマッピングされ、対応する関数がこのURLに何を返すかを決定します。
ルーティングはマッチングジョブです。

2.バックエンドルーティングとフロントエンドルーティング

• 1. バックエンドルーティング：
  通常のWebサイトの場合、すべてのハイパーリンクはURLアドレスです。すべてのURLアドレスはサーバー上の対応するリソースに対応します。
  各フロントエンドリソースはURLアドレスに対応します。バックエンドルーティングは
  ブラウザをアドレスバーに分散します。別のURLを切り替えるたびに、バックエンドサーバーへの要求と要求に対するサーバの応答異なるページを返すために、バックグラウンドで前面表示モザイクhtmlファイルに渡されたが
  、ブラウザがページ更新されますを意味しているエンドの前と後に分離されていません

• 2、経路の前端：
  について単一ページ（ハッシュ用URLを介してアプリケーション#号を達成した）の異なるページの切り替えページが更新されない
  例：www.xxx.com#/xxxこのフォーマット
  同時に特性ハッシュを有する：HTTPリクエストは、関連するハッシュを含んでいませんコンテンツは、アンカーポイントの概念に
  似ています。最初の＃の後に表示される文字は、ブラウザーによって場所識別子として解釈されます。つまり、これらの文字はサーバー側のフロントエンドルーティングに送信されません。＃の後にコンテンツを変更するだけです。のみ対応する位置に移動しますウェブリロードしなくなり、サーバーが再ではありませんから、ブラウザはページを要求します
  
  

単一ページのアプリケーションでは、ハッシュの変更を通じてページを切り替えるこの方法をフロントエンドルーティングと呼びます
（バックエンドルーティングとの違いを形成します。フロントエンドはルーティングを担当します）

---

第二に、基本的な使用法

1.はじめに

vue-routerはVue.jsの公式ルーティングマネージャーです

CDNの紹介：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-routerはVueに依存しているため、vue-routerを導入する順序はVueの後にする必要があります

vue-routerパッケージがインポートされると、ハッシュルーティング
URLアドレスが自動的に使用され、次の後に自動的に追加されます。#/

2.ルーティングルールオブジェクトを作成して、ルーティングマッチングルールを定義します。

vue-routerパッケージがインポートされると、ウィンドウグローバルオブジェクトにVueRouterという名前のルートコンストラクターがあります。

①、によってnew VueRouter()作成ルーティングルールオブジェクトとコンストラクタ新しい時間を設定オブジェクトを渡し

ルーティングルールに一致している構成オブジェクトの各ルートには、オブジェクトのマッチングルールであります

2つのオブジェクトに必須のある属性：
pathすなわちリスニングルーティング接続が存在しcomponent、すなわち表示すべきコンポーネントを対応する
例：{path:"/login",component:login}

②ルーティングルールオブジェクトをVueインスタンスのrouter属性に登録します。

このようにして、以前のルーティング接続を照合した後、背面にある対応するコンポーネントがページに表示され、ルーティングを実現します

<script>
    // 组件模板对象1
    var login={
        template:"<h1>登录</h1>"
    }
    // 组件模板对象2
    var register={
        template:"<h1>注册</h1>"
    }

    // 创建路由规则对象
    var routerObj=new VueRouter({
        // 定义路由匹配规则
        routes:[
            // component属性的值是模板对象 不是组件引用名称 不加引号
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 将路由规则对象注册到Vue实例上 监听URL地址的变化然后根据规则展示对应的组件
       router:routerObj
    });
</script>

3. <router-view>ラベルプレースホルダーを使用して、ルーティングルールに一致するコンポーネントをラベルに表示します。

vue-routerはプレースホルダーの<router-view>要素を提供します。ルーティングルールに一致するコンポーネントはラベルに表示されます

<div id="app">
    <!-- 跳转的地址前面必须加上井号[#] 因为跳转到的并不是真实页面 而是锚点路由 -->
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    
    <!-- 路由规则匹配到的组件会展示到该标签上 -->
    <router-view></router-view>
</div>

実装プロセス：
ハイパーリンクし、ページのURLアドレスをユーザーがクリックすると変更される
ルートオブジェクトのためには、URLアドレスを変更した後では、自動的に登録インスタンス上のVueにルーティングされますリッスン URLアドレスに即座にルーティングされたアドレスが変わる一致
一致した場合対応するルールに対して、対応するコンポーネントがページのプレースホルダーに表示されます<router-view>

---

3番目に<router-link>、ルーティングリンクを設定します

Vueはto属性を<router-link>使用してルーティングされる接続アドレス
<router-link>ラベルを指定するラベルを提供します。ページはデフォルトでラベルとしてレンダリングされます。

例：

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

次と等しい：

<a href="#/login">登录</a>
<a href="#/register">注册</a>

tag属性を使用して、レンダリングするタグを指定できます。

<router-link to="/login" tag="span">登录</router-link>

---

4、リダイレクトルーティング

モニター[ /]ルートパスは、ページに入るとすぐに、指定されたコンポーネントを表示します

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",component:login},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

この方法を実装することもできますが、最初にページに入ったときに表示されるルートアンカーはまだルートパスです。
このとき、実際のリダイレクトは、リダイレクトパスを指定することで実現できます。{path:"/",redirect:"/login"}

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

ここでのリダイレクトは、サーバー側のリダイレクトとは異なります。ここでのリダイレクトは、クライアントがハッシュ値を変更してジャンプアドレスを変更することです。

---

5、ハイライト効果

ターゲットルートが正常にアクティブ化されると、link要素はアクティブ化を示すCSSクラス名を自動的に設定します。このクラス
は、現在読み込まれているコンポーネントに存在します。router-link-active

次に、このクラスにスタイルを追加する限り、ハイライト効果を実現できます。

<style>
    .router-link-active
    {
        color: aqua;
        font-size: 40px;
    }
</style>

クラス名は、ルート構築オプションで単独で指定することもできますlinkActiveClass。

<script>
var routerObj=new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ],
            // 自定义激活的类名
            linkActiveClass:"myactiveclass"
        })
</script>

<style>
    .myactiveclass
    {
        color: aqua;
        font-size: 40px;
    }
</style>

---

第六に、パラメータ送信

パラメータの受け渡しは、ルーティングコンポーネント内のリクエストされたURLに含まれるパラメータを取得することです

：伝送パラメータを達成するための2つの方法があり
、クエリモードとのparams方法は、

1.クエリメソッド

$route現在のルーティングオブジェクトのクエリ属性を取得するために使用します。
クエリ属性には、それに含まれるすべてのクエリパラメータが含まれます。

<router-link to="/login?id=1">登录</router-link>

<script>
    var login={
        template:"<h1>登录</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

次いで、使用が$route.query.属性名得られる
複数のパラメータを渡すことができます。

<router-link to="/login?id=1&name=陈涛">登录</router-link>

<script>
    var login={
    	// 用 $route.query.属性名 来获取参数
        template:"<h1>登录 - {{$route.query.id}} - {{$route.query.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

2.パラメータ

内部に保持されているクエリパラメータを使用して$route取得された現在のルーティングオブジェクトの1つがありparams属性
ます
。Vue-routerは、パス（リクエストパス）を内部的に正規表現に事前解析してから、正規表現をfullPathに解析します。

このようにリクエストすると、スラッシュでレイヤー化されます：

<router-link to="/login/1">登录</router-link>

<script>
  var login={
        template:"<h1>登录</h1>",
        created()
        {
            // 组件的生命周期函数
            console.log(this.$route);
        }
    }
</script>

：受信パラメータがあるプロパティをparamsは

により$route.params.属性名取得
複数のパラメータを渡すことができます。

<router-link to="/login/1/陈涛">登录</router-link>

<script>
    var login={
        template:"<h1>登录 - {{$route.params.id}} - {{$route.params.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

---