Element UI 页面传参与接收参数，注意router和route-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 页面传参与接收参数，注意router和route。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 Element UI 中，可以使用 $router 对象来进行页面跳转并设置请求参数。同时，也可以在目标页面中使用 $route 对象来获取传递的参数。

以下是一个示例：

在跳转前的页面中，使用 $router 对象进行跳转并设置参数：

<template>
  <el-button @click="goToTargetPage">跳转目标页面</el-button>
</template>

<script>
export default {
  methods: {
    goToTargetPage() {
      // 设置参数
      const params = {
        param1: 'value1',
        param2: 'value2'
      };

      // 使用 $router 进行跳转并设置参数
      this.$router.push({
        path: '/target-page',
        query: params  // 设置查询参数
      });
    }
  }
}
</script>
在目标页面中，使用 $route 对象获取传递的参数：
vue
<template>
  <div>
    <p>传递的参数：</p>
    <p>param1: {{ param1 }}</p>
    <p>param2: {{ param2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param1: '',
      param2: ''
    };
  },
  created() {
    // 使用 $route 获取传递的参数
    this.param1 = this.$route.query.param1;
    this.param2 = this.$route.query.param2;
  }
}
</script>

在这个例子中，跳转前的页面通过 $router 对象的 push 方法进行跳转，并设置了查询参数 param1 和 param2。在目标页面中，通过 $route 对象获取了传递的参数，并将它们赋值给组件的数据属性 param1 和 param2。在模板中，可以使用这些数据属性来显示传递的参数值。文章来源地址https://www.toymoban.com/news/detail-800614.html

到了这里，关于Element UI 页面传参与接收参数，注意router和route的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！