代码之家 › 专栏 › 技术社区 › Michael Giovanni Pumo

Nuxt JS/Vue中的动态URL路径

nuxt.js vue-router vue.js javascript

Michael Giovanni Pumo · 技术社区 · 6 年前

Nuxt JS基于文件系统创建其路由。通常需要为动态参数设置模板,例如 _id.vue 等。

但是,我的后端开发人员有一个CMS,它可以吐出JSON,并链接到完全动态URL上的页面。

例如 /about-us/people/michael/

我无法提前知道这些类型的URL应该如何通过Nuxt的基于文件的系统进行路由。

一些链接可能看起来像: /articles/hello-world/ 等。

是否有任何关于如何捕获所有路径的信息,无论嵌套的距离有多远?

我可以通过 index.vue 和 _slug.vue ,(例如 /about-us/ )除此之外,我如何解决 /about-us/people/ 等等,没有它扔了一个 四百零四 .

非常感谢你的帮助。

1 回复 | 直到 6 年前

Aldarund 6 年前

extendRoutes

module.exports = {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'catchall',
        path: '*',
        component: resolve(__dirname, 'pages/catchallpage.vue')
      })
    }
  }
}

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前