路由传参的例子收获

路由传参的例子实战应用

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人

---

---

收获

//路由传参 html中
 <router-link :to="'/order?id='+v.id">
          <span>{{v.name}}</span>
 </router-link>
 //路由显示
 {
    path: '/order',
    name: '各类菜品',
    component: () => import('../views/shuju/index')
  } 
  //获取获取所有菜系
    getData() {
      axios({
        methods: "get",
        url: "/data/cuisine"
      })
        .then(res => {
          //请求成功
          // console.log(res);
          // console.log(this.lists);
          //渲染到界面上
          this.lists = res.data;
        })
        .catch(err => {
          //请求失败
          console.log(err);
        });
    } 
  //下面这个是在点击导航栏的时候通过路由的改变进而改变内容
 mounted() {
    //只在元素挂载的时候调用,需要在点击导航栏的时候调用
    this.getCuisineData();
  },
  methods: {
    //获取获取各类菜系
    getCuisineData() {
      axios({
        methods: "get",
        url: `/data/cuisine/${this.$route.query.id}`
      })
        .then(res => {
          //请求成功
          console.log(res);
          this.cuisine = res.data;
        })
        .catch(err => {
          //请求失败
          console.log(err);
        });
    },
    // 添加数量
    add(i) {
      axios({
        methods: "put",
        url: `/data/cuisine/increment`,
        data: {
          id:this.cuisine[i].id,
          pid:this.cuisine[i].pid,
          type:1
        }
      })
        .then(res => {
          //请求成功
          console.log(res);
          this.getCuisineData();
        })
        .catch(err => {
          //请求失败
          console.log(err);
        });
    }
  },
  watch: {
    //只在元素挂载的时候调用,需要在点击导航栏的时候调用,即路由改变的时候调用
    $route() {
      this.getCuisineData();
    }
  }

//添加数量 在添加数量的时候应该参入参数i i为你点击的是哪个数量添加
 // 添加数量
    add(i) {
      axios({
        methods: "put",
        url: `/data/cuisine/increment`,
        data: {
          id:this.cuisine[i].id,
          pid:this.cuisine[i].pid,
          type:1
        }
      })
        .then(res => {
          //请求成功
          console.log(res);
          this.getCuisineData();
        })
        .catch(err => {
          //请求失败
          console.log(err);
        });
    }

最后还收获了 如果发送请求的时候获取的参数为对象的时候

可以通过序列化JSON.parse(JSON.stringify(data))转化为数组对象