应用程序的 Nuxt 动态 url 参数

Question

我对 Vue 和 Nuxt 还很陌生，并且我构建了一个 Web 应用程序。我需要显示基于城市的url，但不知道这是什么路由。

我在域mydomain.com 下有网络应用程序，并且有如下页面：

• / - 主页 (mydomain.com)
• /list - 用于项目列表 (mydomain.com/list)
• /list/123 - 商品页面，其中 123 是商品的 id (mydomain.com/list/123)

我想要的是获取用户的位置并将其写入 vuex 存储并始终显示带有城市前缀的 url，所以它看起来像：

• /paris/ - 主页 (mydomain.com/paris)
• /paris/list - 用于项目列表 (mydomain.com/paris/list)
• /paris/list/123 - 商品页面，其中 123 是商品的 id (mydomain.com/paris/list/123)

用户将能够使用下拉菜单更改城市。我正在使用 nuxt 并且所有 url 部分都是从页面中使用的，但在这种情况下，城市不是页面，它是一种参数。请建议在哪里看。

Answer 1

使用 vue-router 可以实现。您可以在那里设置路径，例如：

{
    path: '/:city',
    name: 'City',
    component: City
},
{
    path: '/:city/list',
    name: 'List',
    component: ListCmp
},
{
    path: '/:city/list/:id',
    name: 'ItemPage',
    component: ItemPageCmp
},

ListCmp 的模板链接是：

<router-link :to="{name: 'List', params: {city: 'Paris'}}">Paris</router-link>

在您的组件中，您将访问您的参数：

this.$route.params.city