Vue3学习（十九） - 使用Vue完成页面参数传递-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3学习（十九） - 使用Vue完成页面参数传递。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

我知道自己现在的状态很不好，以为放个假能好好放松下心情，结果昨晚做梦还在工作，调试代码，和领导汇报工作。
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);