学習ノートVue(19)-ルーティングナビゲーションガード&ダイナミックルーティング

一、ルートナビゲーションガード
ルーティング・ナビゲーション・ガードは、ルーティングのフック関数です.
1.beforeRouteLeave
例えば、一部の情報収集ページでは、ユーザーが情報を記入した後、うっかり別の場所に着いた場合、このページを離れるかどうかのヒントを与えるべきです.そうしないと、前に記入した情報はすべて無駄に記入され、beforeRouteLeaveという関数を使うことができます.3つのパラメータがあります.to、from、next、to:ジャンプするパス情報です.from:どこからジャンプした経路情報、next:ルーティングフック関数を書いたらnext()を書かなければなりません.そうしないとジャンプは実行されません.

<template>
    <div>
        <div class="learn">    </div>
           ：<input type='text' v-model="name">
        <button @click="handleClick">  </button>
    </div>
</template>
<script>
    export default {
        //      ，           
        beforeRouteLeave (to, from, next){
            //to:           
            //from：       
            //next:   ，     beforeRouteLeave       next()   ，      

            //    ，  input   ，        ，    next()
            if(this.name){
                const flag = window.confirm('       ');
                if(flag){
                    this.name = '';
                    next();
                }
            }else{
                next();
            }
        },
        data () {
            return {
                name: ''
            }
        },
        methods: {
            handleClick(){
                this.name = '';
            }
        }
    }
</script>

2.beforeRouteEnter
このルートにジャンプする前に.この関数ではthisは使用できません.thisはundefiendで、nextで関数を渡すことができます.関数のパラメータはvueインスタンスです.

    beforeRouteEnter (to, from, next){
        //           this，this undefiend
        next(vm => {
            // console.log(vm);
        });
    },

3.beforeRouteUpdate
ルーティング内のコンテンツが更新される前に.
二、動的ルーティング
たとえば、1つのモジュールにいくつかの問題リンクを配置したい場合は、ある問題をクリックして彼の詳細ページに入り、ルーティングモジュールにサブルーティングを多く追加するのではなく、動的ルーティングを使用することができます.動的ルーティングを使用して、idのマッチングによって表示したい詳細ページを表示します.まずrouterでjsにquestionルーティングを追加します.

{
      path: '/question/:id', //            id     ，
      name: 'question',
      component: () => import('./views/Question')
 },

ここのpathパスには1つ使います:後ろにidをつないで、コロンの後ろのidは固定的な値ではありませんて、router-linkの中でparamsを通じてパスをマッチングすることができて、コロンを使わないで、使いますか?これにより、queryプロパティを使用してパスをマッチングします.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!--      to    path，        -->
    <router-link tag="div" :to="{name: 'question', params: {id: item.id}}" class="aboutInfo"
      v-for="item in question" :key="item.id">
      {{item.info}}
      </router-link>
  </div>
</template>

<script>
    export default {
        data (){
          return {
            question: [
              {
                id: 201901,
                info: 'About question1'
              },
                            {
                id:201902,
                info: 'About question2'
              },
                            {
                id:201903,
                info: 'About question3'
              }
            ]
          }
        }
    }
</script>

ダイナミックルーティングのtoではpath属性は使えないので注意してください.そうしないと使いにくいです.
$route.params.idは現在のパスのid値を取得し、このidに基づいて問題リストに対応するidのtitle内容を見つけてページにレンダリングすることができる:Question.vue:

<template>
    <div class="question">
        <h4>  {{$route.params.id}}</h4>
        <div>{{questionInfo}}</div>
        <button @click="handleClick" v-show="flag">     </button>
    </div>
</template>

<script>
export default {
    beforeRouteUpdate (to, from, next){
        this.getData(to.params.id)
        next();
    },
    mounted () {
        this.getData(this.$route.params.id)
    },
    data () {
        return {
            questionInfo: '',
            curId: '',
            flag: true,
            question: [
              {
                id: 201901,
                title: 'Vue            ？'
              },
                            {
                id: 201902,
                title: '       vue       ？'
              },
                            {
                id: 201903,
                title: '        ？'
              }
            ]
        }
    },
    methods: {
        handleClick() {
            this.$router.push({
                name: 'question',
                params: {
                    id: this.curId + 1
                }
            })
        },
        getData (id){
            const index = this.question.findIndex(item => item.id === id);
            // console.log(index);
            if(index == -1){
                this.flag = false;
            }else{
                this.questionInfo = this.question[index].title;
                this.curId = id;
                this.flag = true;
            }
        }
    }
}
</script>