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 将是空值  ！！！