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

在这里，我试图将变量header_url数据传递给我的其他vue页面。因为我还想在其他vue脚本标记中的push和post方法中使用它。我不知道怎么做？因为，我只能找到在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>

//Home.vue
家
注销
导出默认值{
数据：（）=>({
url:“https:…”
})
}
var header_url=window.location.href；
如果（标题长度>100）{
var-token=window.location.href.match（//\\\\\（？：id\u-token）\=（[\S\S]*？）\&/）[1]；//eslint禁用行
console.log（令牌）；
}

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

从文档中：

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