Question

我对Vue和Nuxt相当陌生，并且我构建了一个Web应用程序。我需要显示基于城市的网址，但不知道这是哪种路由。

我在域mydomain.com下有一个Web应用程序，并且有如下页面：

/-用于主页（mydomain.com）
/list-用于项目列表（mydomain.com/list）
/list/123-物品页面，其中123是物品（mydomain.com/list/123）的ID

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

/paris/-用于主页（mydomain.com/paris）
/paris/list-用于项目列表（mydomain.com/paris/list）
/paris/list/123-物品页面，其中123是物品（mydomain.com/paris/list/123）的ID

用户将可以使用下拉菜单更改城市。我正在使用nuxt，并且所有url部分都从页面使用，但是在这种情况下，city不是页面，这是一种参数。请提供建议。

Answer 1

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

.container {
  flex-basis: 20%;
  border: 1px solid #000;
  margin-left:-1px;
  margin-bottom: 1px;
  min-height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

您的ListCmp模板链接为：

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

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

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

适用于应用程序的Nuxt动态网址参数

1 个答案: