Vue3學習（十九） - 使用Vue完成頁面引數傳遞

久曲健發表於2024-02-26
Vue

寫在前面

我知道自己現在的狀態很不好，以為放個假能好好放鬆下心情，結果昨晚做夢還在工作，除錯程式碼，和領導彙報工作。

天吶，明明是在放假，可大腦還在考慮工作的事，我的天那，這是怎麼了？

Vue頁面引數傳遞

1、任務拆解

  • 頁面跳轉時帶上當前電子書id引數ebookId
  • 新增/編輯文件時，讀取電子書id引數ebookId

2、頁面跳轉帶當前頁面的ID

啥意思呢，就是你點哪條資料發生頁面跳轉時，需要帶上當前你操作的id，也就是在路由上拼接上你的ID即可，示例程式碼如下：

<router-link :to="'/admin/admin-doc?ebookId='+record.id">
  <a-button type="primary">
    文件管理
  </a-button>
</router-link>

3、新增/儲存時讀取電子書id

這塊可以理解為，你編輯或者新增的時候，都會呼叫儲存介面吧，你得告訴介面，你針對哪條資料進行操作對吧，或者得知道你從哪條資料過來的觸發的編輯和新增吧，示例程式碼如下：

  /**
   * 新增
   */
  const add = () => {
    open.value = true;
    doc.value = {
      ebookId: route.query.ebookId
    };
    treeSelectData.value = Tool.copy(level1.value);
    // 為選擇樹新增一個"無"
    treeSelectData.value.unshift({id: 0, name: '無'});
  };

知識點：

  • doc.value = {ebookId: route.query.ebookId};，解決新增時電子書ID不能為空提示
  • record.ebookId=route.query.ebookId，解決編輯時提示電子書ID不能為空提示
  • 使用route來獲取當前路由的資訊
import { useRoute } from 'vue-router'



const route = useRoute();
console.log("路由：", route);
console.log("route.path：", route.path);
console.log("route.query：", route.query);
console.log("route.fullPath：", route.fullPath);
console.log("route.param：", route.params);
console.log("route.name：", route.name);
console.log("route.meta：", route.meta);

4、效果

寫在最後

每次家人談及我的個人問題或者安排相親時，我都感覺特別難受，特別不舒服，一點都不期待，甚至每次相親後好幾天都不過這個勁，變得敏感、易怒、多疑。

昨天家裡來了客人，結果又被問了個人問題之類，就好像不能結婚都是我的問題一樣？

難道我就不想結婚，不想有個家嗎，那人家不想跟我結婚，35歲被分手，也是我的原因？

再者現在相親認識的，哪有那麼容易結婚，無非是一堆不會戀愛的男人，去攻堅一堆很多男人都搞不定的女人罷了，為什麼要苦苦糾纏呢？

反正誰說我，給我洗腦我也是一樣，既然都來相親了，還是一副高高在上，審視者的態度等著別人來追你的話，那麼恭喜你，抱歉我也慢熱！

相關文章