zoukankan      html  css  js  c++  java
  • 18 vue 动态路由传参

    params形式

     http://192.168.1.100:8080/#/infoDetailed/231

     //定义路由
    { path:
    "/infoDetailed/:newsId", name: "InfoDetailed", component: () => import("@/views/info/InfoDetailed.vue") },

    //a组件传参
     handleEdit(index, row) {
      
          this.$router.push({ name: "InfoDetailed", params: { newsId: row.id } });
      },
     
    //InfoDetailed.vue组件接收参数
     created() {
        this.newsId = this.$route.params.newsId;
     }
     

    params传参配置props属性

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

    使用 props 将组件和路由解耦:也就是说配置了props就不用使用this.$route.params.xxx了.直接挂载到组件的props属性上。方便其他使用

    props搭配query传参不会生效。

     {
            path: "/infoDetailed/:newsId",
            name: "InfoDetailed",
            component: () => import("@/views/info/InfoDetailed.vue"),
            props: true
        },
    
    
    handleDetailEdit(index, row) {
          let id = row.id;
          this.$router.push({
            name: "InfoDetailed",
            params: { newsId: id }
          });
        },
    
    //InfoDetailed.vue props: { newsId: { type:String, required:true } },

    query传参

    http://192.168.1.100:8080/#/infoDetailed?newsId=230

     {
            path: "/infoDetailed",
            name: "InfoDetailed",
            component: () => import("@/views/info/InfoDetailed.vue")
        }
    
    
    
    
     handleEdit(index, row) {
          console.log(index, row);
          this.$router.push({ name: "InfoDetailed", query: { newsId: row.id } });
      },
    
    
    //InfoDetailed.vue
    
     created() {
        this.newsId = this.$route.query.newsId
      }


     params参数丢失问题

    以name自定义属性举例子:

    不要在params中随便加路由path中未定义的动态路由参数。

    另外即使加了name属性,跳转到新的页面url地址http://192.168.1.100:8080/#/infoDetailed/231 也只会携带上newsId的参数信息,不会带上name的数据信息。

     handleEdit(index, row) {
          console.log(index, row);
          // params参数丢失问题:name在router.js路由path中并没有配置, path: "/infoDetailed/:newsId",
          //自己强行加进去,跳转到新页面,第一次会存在,但是一旦刷新,name参数直接丢失。而newsId无此问题。
          this.$router.push({ name: "InfoDetailed", params: { newsId: row.id,name:'zs' } });
        },
  • 相关阅读:
    1.13 Flask
    1.12 Flask 复习
    1.11 flask
    1.10 flask
    1.9 flask
    1.8 flask 路由
    sql server存储过程
    Ajax学习笔记
    随机密码字典生成器
    jRazor
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13198817.html
Copyright © 2011-2022 走看看