vue如何实现跨页面传递与接收数组并赋值

跨页面传递与接收数组并赋值，可以通过vue-router的params来实现。

步骤如下：

1. 路由设置

在路由设置中，可以通过props将参数传递给下一个页面。在这个例子中，我们使用props将数组传递给下一个页面。假定我们的路由为：

{
  path: '/page2/:id',
  name: 'page2',
  component: Page2,
  props: true
}

1. 页面2接收数组

在页面2中，可以通过props属性来接收数组。下面的示例代码演示了如何获取页面1中传递的数组：

<script>
  export default {
    name: 'page2',
    props: ['id'],

    data() {
      return {
        items: []
      }
    },

    created() {
      this.items = this.$route.params.items;
    }
  }
</script>

在这个代码中，我们通过this.$route.params.items来获取在页面1中传递的数组。请注意，我们也需要在data函数中定义一个items数组。

1. 页面1传递数组

在页面1中，我们可以通过$route.push方法将数组传递给下一个页面。下面的示例代码演示了如何传递包含数组的路由：

this.$router.push({ name: 'page2', params: { id: 123, items: ['item1', 'item2'] } })

在这个代码中，我们通过params属性将数组传递给下一个页面。

示例2：

// 在 A 页面中
this.$router.push({
  name: 'B',
  params: {
    id: [1, 2, 3]
  }
})

// 在 B 页面的路由中定义 props 属性
{
  path: '/B/:id',
  name: 'B',
  component: 'B',
  props: true // 或者 props: ['id']
}

// 在 B 页面中通过 this.$route.params.id 获取传递过来的数组
export default {
  created () {
    console.log(this.$route.params.id) // [1, 2, 3]
  }
}

在这个例子中，我们将数组 [1, 2, 3] 传递给了 B 页面，并且通过 this.$route.params.id 来获取传递过来的值。