国道### TSの設定
インストール①：NPM I VUE-ルータ-S
②src新しいページ下/ Home.vue（もGoods.vue、Detail.vueおよび他のページ）：
< テンプレート> < divのクラス= "ホーム" > < h2の>首页</ H2 > </ DIV > </ テンプレート> < スクリプトLANG = "TS" > 輸入ヴュから' VUE ' 。 インポート{コンポーネント} 「VUE-プロパティデコレータ」。 @Component（{}） エクスポートデフォルトクラスホームヴュー{延び } </ スクリプト>
新しいプラグイン/ router.ts :(ノートReg.vueとDetail.vue下③src）は輸入に基づいており、遅延ロードをルーティング達成するための手段を必要としています
「VUE」からインポートヴュ。 以下からの輸入VueRouter「VUE-ルータ」。 Vue.use（VueRouter）。// 安装插件 からインポートホーム「../pages/Home.vue」。 以下からの輸入品「../pages/Goods.vue」。 ユーザーをインポートする「../pages/User.vue」。 ログインをインポート「../pages/Login.vue」。 NOPAGEをインポート「../pages/NoPage.vue」。 せルート = [ {パス： "/ホーム" 、成分：ホーム}、 {パス：成分：製品}、 {パス： "/ユーザ" 、成分：ユーザー}、 {パス： "/ログイン" 、コンポーネント：ログイン}、 {パス： "/ REG"、成分：（）=>インポート（」。 ./pages/Reg.vue」）}、 {パス： "/detail",component:(resolve:any)=>{require(["../pages/Detail.vue" ]、解決）}}、 {パス： "*" は、成分：NOPAGE}、 {パス： "/"、リダイレクト： "/ホーム" } ]。 ルータましょう = 新しいVueRouter（{ ：モード "歴史" 、 輸出デフォルトルータ;
④main.jsは、ルータと登録を導入しました：
"./plugins/router"からインポートルータ新ヴュー（{ レンダリング：H => H（APP）、 ルータ 。}）$マウント（ '#app'）
⑤App.vueルートは、スペースを開きました。
< ルータビュー> </ ルータビュー>
###ルートガード
router.ts中：
/ * グローバルガード * / router.beforeEach（（次に、からへ） => { にconsole.log（ "グローバルフロントガード" ） 次に（）; }） router.afterEach（（）から、へ => { コンソール.logの（ "グローバル対向リアガード" ） }） // 排他的ガードルーティング {パス"/ユーザ"、コンポーネント：ユーザー、beforeEnter：（全ルートから：ルート、次へ：機能）=> { コンソール。ログ（ "ルーティング排他フロントガード" ） 次に（）; }}、
注：ガード排他的経路を設定する場合、ルートは、TSの自動導入型定義（「VUEルータ」からインポートVueRouter、{ルートを};）
ルート:(ガードタイプの内部構成要素を手動で導入されることに注意してください）
（1）User.vueで：
{}ルートインポート「VUE-ルータ」から、
@Component（{
/ *
ここではライトカスタム命令、フィルタ、ガードフック関数
* /
beforeRouteEnter（全経路から：ルート、次に：機能）{
// 書き込み以来デコレータで、フック関数を自動的に推測することができる、次のタイプから、タイプすることなく追加することができてもよい
（「フロントガードアセンブリ」CONSOLE.LOG ）
次の（）;
}
}）
（2）Reg.vue。
「VUEルータ」からインポート{ルート} 。
@Component（{
beforeRouteLeave（全経路から：ルート、次：機能）{
にconsole.log（ "组件内后置守卫" ）
次の（）;
}
}）
###データ交換-axios
インストール：NPM私axios @タイプ/ axios -S
注：ファイルタイプの宣言とないすべてのプラグイン、サポートTSを確保するための唯一のファイルタイプの宣言は、何の型宣言文書型宣言ファイルは、あなたがプラグインをインストールする必要はありません。
（1）は、最初の使用をaxios：
①public新しいデータ/ user.json：
{ "データ" ：[ { "ユーザ名"： "WXM" } ] }
②Home.vueで：
インポート"Axios"からAxios ; 輸出デフォルトクラスホーム拡張ヴュー{ マウント（）：無効{ Axios（{ URL： "/data/user.json" // データが直接アクセスできる公共 。}）、その後（ RES => console.log（res.data） ） } }
（2）JSON-サーバーのデータ・アクセス：
URL：URLを設定し、最初のオープンJSON-サーバーのデータサービス、およびする必要があります "のhttp：// localhostを：3000 /データ"
（3）データアクセスtiantian-API：
①オープンtiantian-APIデータサービス：NPMの実行開始
②設定クロスドメインのプロキシは、（新ルートディレクトリをvue.config.js）：
module.exportsは= { devServer：{ プロキシ：{ "/ V3" ：{ ターゲット： "HTTP：// localhostを：3000" 、 changeOrigin：真 } } } }
元のアドレスを交換する③プロキシアドレス：
URL： "/ V3 /ホームページ"
（4）axiosインターセプター。
新①plugins下axios.ts：
インポートaxios "axios"から、{AxiosRequestConfig、AxiosResponse} 。
インポートルータ「./router」;
インポート{TUSER} '@ /タイプ' ;
// 请求拦截器
axios.interceptors.request.use（（設定：AxiosRequestConfig）：AxiosRequestConfig => {
/ *
抓取トークン、到响应头携带
显示ローディング
* /
ましょうユーザー：TUSER = window.localStorage.getItem（「ユーザ" ）;
ユーザー？=ユーザーJSON.parse（利用者）："」;
config.headers = {トークン：ユーザ.token？} //リクエストヘッダ搬送
戻りconfigと;
}、（エラー） => {
リターンPromise.reject（エラー）
}）
// 応答ブロッカー
axios.interceptors.response.use（（応答：AxiosResponse <任意 >）：AxiosResponse <任意> => {
/ *
トークンの有効期限が切れ、ジャンプログイン、現在のアドレスを残し
ローディングオフ
* /
// エラー（トークンの有効期限）があるかどうかを判断し、現在のパスがログインしないで、その後、ログインページにジャンプし、現在のバンドのフルパス過去
IF（！response.data.err == 2 && router.currentRoute.fullPath.includes（ "/ログイン" ））{
：router.push（{パス "/ログイン"リターン、クエリ：{パス：router.currentRoute。フルパス}}）;
}
応答;
}、（エラー） => {
リターンPromise.reject（エラー）
}）// 外部露光
エクスポートデフォルト Axios。
Axiosは②Home.vueのaxiosが使用された場合、元のパッケージを置き換えるために使用しました：
「../plugins/axios」からインポートaxios。
（5）axiosは、ウィンドウをマウントします。
①src/種類/ index.ts中：
//は、グローバル変数を定義し、再定義ウィンドウインタフェース DECLARE {グローバル インターフェースウィンドウ{ Axios（設定：AxiosRequestConfig）：AxiosPromise <任意> } }
追加する外国人の露光時間の②axiosインターセプタ：
window.axios = axios。
③main.js導入しました：
輸入「./plugins/axios」
直接window.axiosを使用）（使用中の任意のaxiosを導入することなく④Home.vue。
：（）搭載ボイド{ （{window.axios ：URL "/ V3 /ホームページ" 。次に、（}） RES => にconsole.log（res.data） ） }
###ログイン検証ロジック
router.currentRoute.fullPath利用①axios.ts応答ブロッカーは、現在のアドレスを保持するために、電流経路を得ることができ宛て。
// エラーが（トークンの有効期限が切れて）があるかどうかを決定し、電流経路は、ログイン後、ログインページと過去と現在のフルパスにジャンプされていない IF（response.data.err == 2 &&！Router.currentRoute.fullPath。 （ "/ログイン"を含む））{ ：router.push（{パス "/ログイン" 、クエリ：{パス：router.currentRoute.fullPath}}）; }
②Login.vue要求ルーティング応答インターセプターへのログイン、エラーがない場合、のlocalStorageにトークン預金、ジャンプが保持する場合：
< ボタン@click = "ログイン" >登录</ ボタン>
輸出デフォルトのクラスログインはVueの{拡張 パブリックログインを（）：無効{ window.axios（{ URL： "/ API /ログイン" 、 方法： "ポスト" 、 データ：{ユーザー名： "chenghao"、パスワード： "chenghao123" } } ）.then（ RES => { 場合（res.data.err == 0 ）{ // 种トークン到のlocalStorage中 window.localStorage.setItem（ "ユーザ"、JSON.stringify（res.data）） // ページにジャンプする前に、 この。$ Router.replace（これ。$ Route.query.path AS文字列） } } ） } }
状態管理###
インストール①：NPM I vuex vuexクラス-S
継続するには......