VUE踩坑記

  {
    path: '/test',
    name: 'Test',
    component: Test,
    // props: route => route.query        可以
    // props: { name: 'jjw', age: 19 }    可以
    props: route => ({ name: 'jjw', age: 19 })  //可以
    //props: route => { name: 'jjw', age: 19 }  編譯時報符號錯誤， 在age后的 : 下面紅波浪符號
  },

 組件

export default {
  name: 'Test',
  props: {
    /* name: '',
      age: 88

      13:11  error  The "name" property should be a constructor  vue/require-prop-type-constructor
      14:10  error  The "age" property should be a constructor   vue/require-prop-type-constructor 
    */
    name: String,
    age: Number
    // name: {　　　　這樣也可以，上面的更簡單
    //   type: String
    // },
    // age: {
    //   type: Number
    // }
  },
  components: {
    TestMsg
  }
}

 

      <router-link :to="{path: '/Test', query: {name: 'jjw', age: 88, more: {a: 'aaa', b: 'bbb'}}}">Test</router-link> 復合對象不行

http://localhost:8080/#/Test?name=jjw&age=88&more=[object Object]  被解析成這樣

 隱藏 URL參數

  {
    path: '/test',
    name: 'test',   //這個很重要，區別大小寫
    component: Test
    // props: { name: '', age: 0 }
  },

export default {
  name: 'App',
  template: '#app',
  methods: {
    btnclick () {
      this.$router.push({
        name: 'test',    //這個很重要，區分大小寫
        params: {
          name: 'jjw',
          age: 100,
          other: {
            a: 'aaaa',
            b: 'bbbb'
          }
        }
      })
    }
  }
}

export default {
  name: 'Test',
  props: {
    name: String,
    age: Number
  },
  // data () {
  //   return {
  //     rp: {
  //       params: this.$route.params
  //     }
  //   }
  // },
  computed: {
    rp () {
      return this.$route.params
    }
  },
  components: {
    TestMsg
  }
}

// ！！！命名路由傳參數  props 沒有用了, route.path 將是空值  ！！！