我正在构建一个包含产品列表的Nuxt应用程序,点击其中一个打开该产品的专用页面.它运转良好.

struct 是:

/pages/featured // directory of products
/pages/product/:id/:slug // Dedicated product page

现在我想添加一个新功能:

  • 如果从不是产品目录的页面上单击,或者如果有人直接登录,我希望保留产品的专用页面;
  • 我希望在目录顶部打开一个几乎全屏的产品对话框,如果从目录中点击;
  • 将路由更改保留在对话框中.

我希望实现的一个很好的例子是照片目录Youpic.

一个"产品"列表,在一个带有内部导航的对话框中完全可见.

我正在看各种各样的nuxt-routingvue-router个文档来try 开发它,但我离解决方案还很远.

我在这里看到的这一小部分代码看起来与我需要的非常相似,但我不明白应该如何正确地实现它,以及如何创建我的nuxt自定义路由:

export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // or routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

推荐答案

我在这里为您构建了一个沙箱解决方案:https://codesandbox.io/s/reverent-leftpad-xj81p

解释解决方案:

该解决方案使用vue-router中的beforeRouteLeave()函数,默认情况下,该函数可用于nuxt页面:

beforeRouteLeave(to, from, next) {
  if (to.name === "product-id") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

此功能会在功能页面上的任何路由更改发生之前中断这些更改,如果目标路由是产品详细信息的路由(这意味着有人单击了产品链接),则会打开模式对话框.

要在打开和关闭模式时处理url更改,请使用window.history对象:

displayProductModal(route) {
  this.activeModal = route.params.id
  window.history.pushState({}, null, route.path)
},
hideProductModal() {
  this.activeModal = null
  window.history.pushState({}, null, this.$route.path)
}

试着玩一玩,它应该和你提供的youpic示例完全一样.

Note: There are no real "modals" used in the example, the whole example is as basic as possible for the sake of simplicity.

Vue.js相关问答推荐

VueI18n 无法读取或更改组合 API 中的区域设置

保持页面重新加载之间的状态

在 v-for 中定义变量有什么问题吗?

Vuex Mutations 和 Airbnb eslint

我可以在未注册的组件上构建 Vue.js 失败吗?

我是否必须在 Vue 3 中使用 Composition API,还是仍然可以使用Vue 2的方式工作?

使用 Vue.js 和 Jest 进行 URL 重定向测试

为什么 vue 中的 @mouseover 操作不起作用

Vuetify 在数据表中插入操作按钮并获取行数据

在 Vuejs 中Watch观察 window.scrollY 的变化

Vuetify 容器不会填充高度

如何根据生产或开发模式读取不同的 .env 文件?

为什么当我 Select 第二个输入框时音译transliteration不起作用?

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

加载和渲染时对象值上的 Vue.js 未定义错误

事件 click点击的无效处理程序:未定义

验证子组件Vue vee-validate

Angular 5 中的 功能

Vue更改宽度和内容

基于条件的VueJS HTML元素类型