Vue3学习(十九) - 使用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岁被分手,也是我的原因?

再者现在相亲认识的,哪有那么容易结婚,无非是一堆不会恋爱的男人,去攻坚一堆很多男人都搞不定的女人罢了,为什么要苦苦纠缠呢?

反正谁说我,给我洗脑我也是一样,既然都来相亲了,还是一副高高在上,审视者的态度等着别人来追你的话,那么恭喜你,抱歉我也慢热!

热门相关:公子风流   神医嫁到   黑暗血时代   王妃不乖:独宠倾城妃   抗战老兵之不死传奇