vueルーティングジャンプパラメータ


vueではルーティングホッピングパラメータがいくつかありますが、自分でよく使うのは以下のいくつかです.
  • router-linkによるジャンプ
  • プログラミングナビゲーションによるルーティングジャンプ
  • 1. router-link
    <router-link 
        :to="{
            path: 'yourPath', 
            params: { 
                name: 'name', 
                dataObj: data
            },
            query: {
                name: 'name', 
                dataObj: data
            }
        }">
    </router-link>
    
     1. path ->          ,              name  ,           
     2. params ->        ,      key:value    
     3. query ->     url          key:value    
    
     // 2,3      
    

    2.$router方式ジャンプ
    //    a
    <template>
        <button @click="sendParams">  button>
    template>
    <script>
      export default {
        name: '',
        data () {
          return {
            msg: 'test message'
          }
        },
        methods: {
          sendParams () {
            this.$router.push({
                path: 'yourPath', 
                name: '        name,  router       index.js     ',
                params: { 
                    name: 'name', 
                    dataObj: this.msg
                }
                /*query: {
                    name: 'name', 
                    dataObj: this.msg
                }*/
            })
          }
        },
        computed: {
    
        },
        mounted () {
    
        }
      }
    script>
    <style scoped>style>
    ----------------------------------------
    //   b
    <template>
        <h3>msgh3>
    template>
    <script>
      export default {
        name: '',
        data () {
          return {
            msg: ''
          }
        },
        methods: {
          getParams () {
            //            
            let routerParams = this.$route.params.dataobj
            //              
            this.msg = routerParams
          }
        },
        watch: {
        //       ,                          
          '$route': 'getParams'
        }
      }
    script>
    <style scoped>style>

    今回のプロジェクトはこれらの問題に直面して、みんなを助けることができることを望みます!