VUE-ルータの基本的な理解を使用して5分

VUE-ルータの基本的な理解を使用して5分

 

目的：VUE-ルータを使用するように

5分：時間を読み込むとき

出典：オリジナルではない、ビデオから仕上げ

主なコンテンツ

1. VUE-ルートの基本的な使い方
2. どのようにフックにと注文ルータの実行
3. モードルータを渡すパラメータ

---

テキスト

router.gif

 

 

1.基本的な使用

1-1。フォルダのルートの確立、新しいindex.js

1. import Vue from 'vue';

2. import VueRouter from 'vue-router';

3. import Routes from './routes.js'

4.  

5. Vue.use(VueRouter);

6.  

7. export default new VueRouter {

8. mode: 'hash',

9. routes

10. }

11.  

12. 复制代码

注上記のコードの二点。

• 最初のポイント：サードパーティのコンポーネントのVUEは、（...）コンポーネントをインストールするVue.useの方法によって必要とされています。

  • ルータコンポーネント、インストール時に二つのグローバルコンポーネントを登録します
    • ルータリンク：ジャンプ
    • ルータビュー：どのような表示内容で
  • （私は、次の2点を覚えて、ルータとルートの違いを知らないミスを犯す必要はありません一度。）コンポーネントのそれぞれに2つのプロパティがあります

    • $ルーター：すべてのメソッドが含まれています

      • $ router.push（{パス： 'ホーム'}）
      • $ Router.replace（{パス： 'ホーム'}）//代替ルート、ノー歴史

    • $ルート：すべての属性が含まれています

      •  

• 第二のポイント：  export default new VueRouter ({ }) 属性とルーティングマップのものが用意されてい

  • モード：ハッシュ：デフォルト/＃/
  • モード：歴史：/
  • ルートのルートマップ、どのルーティングコンポーネントは表示何VUE
  • ...

1-2：routes.jsを作成します。

1. import Home from '../view/Home.vue';

2. ...

3.  

4. export default [

5. {

6. path: '/', // 重定向到home页面

7. redirect: '/home'

8. },

9. {

10. path: '/home',

11. component: Home

12. }

13. ...

14. ]

15. 复制代码

1-3：ルータに登録main.js

1. ...

2. import router from './router'

3. ...

4. new Vue({

5. router,

6. render: h => h(App),

7. }).$mount('#app')

8. 复制代码

OK：ここでは、基本的なルーティングが達成されています

レッツ・ゴーapp.js利用ルータリンクとルータビューそれ

1.  

2. <template>

3. <div id="app">

4. <ul class="nav">

5. <li class="nav-item">

6. <router-link class="nav-link" to="/home">Home</router-link>

7. </li>

8. </ul>

9. <router-view></router-view>

10. </div>

11. </template>

12.  

13. 复制代码

 

 

 

ルート遅延ロードは、このようなものです。

1.  

2. {

3. path: '/home',

4. component: () => import('../view/Home.vue')

5. }

6. 复制代码

ネストされたが、このような外観をルーティングします。

1. {

2. path: '/user',

3. component: User,

4. // child 下面放需要嵌套的路径和视图

5. children: [

6. ...

7. {

8. path: '/add',

9. name: 'userAdd',

10. component: () => import('../view/UserAdd.vue')

11. }

12. ...

13. ]

14. },

15. 复制代码

そして、どのように実行順序2.ルータをフックします

 

 

 

1. グローバルbeforeEachは：一般的に、アクセス制御のために使用します。
2. ルートbeforeEnter：多くのと
3. コールbeforeRouteEnter内のコンポーネント：このメソッドは、これはありません
4. グローバルrouter.resolve
5. グローバルafterEach
6. コンポーネントbeforeRouterLeaveを呼び出す：フォームが送信され、そうかどうかを懸念している場合は残して、思い出させてくれます
7. beforeRouterUpdate

beforeRouterUpdateは更新で使用されるパラメータをルーティングが、ルーティングアップデートを使用していませんでした。

1. router.beforeEach((to, from, next) => {

2. // 每个路由钩子都会有三个参数，是to、from、next

3. // 具体如何使用，我会单独写一个使用jwt权限控制的文章，在那里面结合实际使用来说明三个参数的使用和路由钩子的使用情况

4. })

5. 复制代码

ここでは、私が唯一の実行順序の下で話をした、特定の参照は公式マニュアルを作った、または次のチャプターを制御するために、私の許可をたどることができます。

3.パラメータを渡す方法

渡すパラメータは二つの方法があります。

路由:/detail/1 Vs 路径：/detail?id=1

• 内部のパスパラメータをルーティング

1. vue代码如下:

2.  

3. <router-link to="/user/detail/1">用户1</router-link>

4. -----

5.  

6. routes代码如下:

7.  

8. {

9. // 路径里面传递参数是通过斜线传递的：比如/user/detail/1

10. path: 'detail/:id',

11. name: 'userDetail',

12. component: () => import('../view/UserDetail.vue')

13. }

14. ----

15.  

16. 这种参数在组件里面如何获取呢？

17.  

18. this.$route.params.id

19.  

20. 复制代码

• 疑問符パラメータを構成する伝送路

1. <router-link to="/user/detail?id=1">用户1</router-link>

2.  

3. 这种传递方式如何在组件里面获取参数呢？

4.  

5. this.$route.query.id

6. 复制代码

---

要約：単純な転送経路の実施形態では、ネストされたルート、およびルーティングパラメータフックの実行の順序を初期化する方法を、本明細書中でおしゃべり。