Vue js中如何在组件之间传递变量数据

Question

在这里，我试图将变量 header_url 数据传递给我的其他 vue 页面。 因为我也想在其他 vue 脚本标签中使用它来推送和发布方法。 我不知道该怎么做？ 因为，我只能找到在 html 标签之间传输数据的示例。

    // Home.vue

<template>
    <div>
        Home
    <h2>logout</h2>
    <a v-bind:href="url">logout</a>
    </div>
</template>
<script>
export default {
    data: () => ({
    url:"https:..."
    
  })
}

var header_url = window.location.href;
if (header_url.length>100) {
   var token=window.location.href.match(/\#(?:id_token)\=([\S\s]*?)\&/)[1]; // eslint-disable-line
   console.log(token);
   
}

</script>

Answer 1

要在单页应用程序中的两个 URL 之间传递数据，您需要使用Vue Router和Route Meta Fields 。

从文档：

有时，您可能希望将任意信息附加到路由，例如转换名称、谁可以访问路由等。这可以通过接受 object 属性的元属性来实现，并且可以在路由位置和导航守卫上访问