Nuxt JS 通过 url 参数重新加载数据答案

【问题标题】：Nuxt JS reload data by url parameterNuxt JS 通过 url 参数重新加载数据
【发布时间】：2021-03-31 12:46:04
【问题描述】：

我有一个带有固定标题的网页。那里有“主账户”和“子账户”项目。这些页面完全一样，并且具有相同的功能，只是它们调用 API 的不同路由来获取不同的数据。我不想要两个不同的文件。一切都应该是一个文件，我只是读取一个变量并更改 url 取决于它。我的标题有一些导航项：

<b-nav-item to="/accounts">Main</b-nav-item>
<b-nav-item to="/accounts">Subs</b-nav-item>

现在我需要将一个变量传递给该重定向，我可以在帐户页面中读取该变量，然后更改获取数据的链接。到目前为止我试过了：

<b-nav-item to="/accounts?main=true">Main</b-nav-item>
<b-nav-item to="/accounts?main=false">Subs</b-nav-item>

我可以使用 this.$route.query.main 读取该 url 中的参数，但我的问题是，如果我在 2 个页面之间切换，页面不会重新加载。网址正在更改，但我不知道如何应对这种变化。我尝试了点击事件并强制重新加载：

@click="$router.go({path:'/accounts', force:true})

但这会强制重新加载整个页面。

我最喜欢的解决方案是创建一个文件夹结构或其他任何东西。然后有两条路线： /mainaccounts 和 /subaccounts 但都指向同一个文件，在该文件中我读取了参数，然后根据链接决定我必须调用的路由

【问题讨论】：

您不需要重新加载整个页面，只需在您的 $route 上设置一个观察者并将您的方法放入该观察者中，同样，您的路线中的值不会是 Boolean，它们为字符串类型"true" 或"false"
网址正在改变，但我不知道如何应对这种变化，看看here
如果你不想改变页面，为什么要使用导航链接呢？只需使用按钮并将它们绑定到基于每个按钮的参数调用正确 API 的方法，例如。 @click=methodName('main')

【解决方案1】：

好的，找到了解决方案。我创建了以下文件树：

accounts/_test/index.vue

在我的标题中，我有一个 nuxt-link：

<NuxtLink :to="{name:'accounts-test', params: {test: 'main'}}>

它按预期工作。

【讨论】：