nuxt配置动态路由以及参数校验(代码片段)

hspl hspl     2023-04-15     634

关键词:

动态路由就是带参数的路由。比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了。

比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以下画线为前缀的Vue文件就是动态路由,然后在文件里边有 $route.params.id来接收参数)

index.vue (可以写三种方式):

<a href="/commodity/123">commodity1</a>
<nuxt-link to="/commodity/123">commodity2</nuxt-link>
<nuxt-link :to="name: ‘commodity‘,params:id: 123">commodity3</nuxt-link>  (推荐这种写法)

_id.vue:

<h2>commodity-Content [$route.params.id]</h2>

 

校验传递参数的正确性是很有必要的,Nuxt.js也贴心的为我们准备了校验方法validate( )。

_id.vue:

export default 

  validate ( params ) 
    // Must be a number
    return /^d+$/.test(params.id)
  

我们使用了validate方法,并把params传递进去,然后用正则进行了校验,如果正则返回了true正常进入页面,如果返回false进入404页面

 

router路由的使用(代码片段)

...件想要动态,任然是_xxx.vue//路由的嵌套,在当前路由下配置子路由。比如当前文件是home.vue那么跟他同级别就需要创建文件夹home,//那么home目录下的xxx.vue就都是home.vue的子路由。简单来说也就是vue的文件名和其他的文件夹名相... 查看详情

nuxt.js的学习路由组件的学习(代码片段)

...cData 2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由(一)vue的动态路由(二)文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasyncData方法会在组件(... 查看详情

vue-router-auto动态生成路由插件(代码片段)

...件名,或者.vue文件的前缀来动态的生成路由,无需自己配置,和nuxt.js相同,具体用法可以参照nuxt.js路由使用//安装vue-router-autonpmivue-router-auto-s//文档地址https://www.npmjs.com/package/vue-router-auto//router/index.jsimportVuefrom‘vue‘importVueRoute... 查看详情

nuxt的路由配置和参数传递

...路由并不复杂,它给我们进行了封装,让我们节省了很多配置环节。如果想查看路由的配置,可以到.nuxt文件中可以看到详细配置第一种:   /意思是跳到pages文件下的index页(页面在最外层)     /abou... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

...公共导航4.3、自定义布局4.4、错误页面4.5、Nuxt组件特殊配置4.5.1、模板代码4.5.2、head5、ajax操作5.1、整合axios5.1.1默认整合5.1.2手动整合5.1.3、常见配置5.2、使用axios发送ajax5.3、使用asyncData发送ajax5.3.1发送一次请求5.3.2、发送多次请... 查看详情

[技术翻译]使用nuxt生成静态网站(代码片段)

...以从API和Markdown文件等动态源动态显示内容。然后,在Nuxt配置文件中,我们静态定义路由,以便它可以通过相同的路由将内容生成为静态文件。在本文中,我们将 查看详情

nuxt的介绍以及入门(代码片段)

...t.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVue服... 查看详情

nuxt.js入门安装及灵活使用(代码片段)

....1、目录1.2、别名3、路由3.1、路由概述3.2、基础路由3.3、动态路由3.4、动态命名路由3.5、默认路由3.6、嵌套路由3.7、过渡动效3.7.1全局过渡动效设置3.7.2、自定义动画4、视图4.1、默认模板4.2、默认布局4.2.1、布局概述4.2.2、布局分... 查看详情

springboot参数校验以及分组校验的使用(代码片段)

SpringBoot参数校验以及分组校验的使用前言什么是validator注解介绍validator内置注解hibernatevalidator扩展注解注解使用单参数校验对象参数校验注解分组对象嵌套错误消息的捕获1、MissingServletRequestParameterException2、ConstraintViolationExceptio... 查看详情

springboot参数校验(代码片段)

...验嵌套校验常用校验注解自定义校验下一节Springboot异常配置Springboot参数校验上一节Springbootcrud和swagger使 查看详情

nuxt(代码片段)

...?服务端渲染SSR-服务端渲染(SSR)SSR缺点动态渲染配置繁琐预渲染Prerendering预渲染:构建阶段生成匹配预渲染路径的html文件(注意:每个需要预渲染的路由都有一个对应的html)。构建出来的ht 查看详情

springboot参数校验以及分组校验的使用(代码片段)

简介: 做web开发基本上每个接口都要对参数进行校验,如果参数比较少,还比较容易处理,一但参数比较多了的话代码中就会出现大量的if-else语句。虽然这种方式简单直接,但会大大降低开发效率和代码可... 查看详情

springboot参数校验以及分组校验的使用(代码片段)

简介:做web开发基本上每个接口都要对参数进行校验,如果参数比较少,还比较容易处理,一但参数比较多了的话代码中就会出现大量的if-else语句。虽然这种方式简单直接,但会大大降低开发效率和代码可读... 查看详情

react中路由的参数传递-路由的配置文件(代码片段)

文章目录路由的参数传递路由的配置文件路由的参数传递传递参数有二种方式(需要注意的是,这两种方式在Router6.x中都是提供的hook函数的API,类组件需要通过高阶组件的方式使用):动态路由的方式;search传递参数(查询字符串);方式... 查看详情

页面重新加载后 Nuxt 动态路由返回 404

...一个使用nuxtjs的项目,我只是这个框架的新手。我已将其配置为使用spa模式,仅供参考,我没有在我的nuxt配置中更改或添加任何内容,只是默认设置。以下是我设置页面的方式。pages/users/index.vu 查看详情

nuxt概念(代码片段)

...字显示(商标)package.jsonnuxt.config.js路由固定路由动态路由总结前言首先了解下B2C模式,分前后台,后台一般为管理系统,不需要展示给过多的用户,而前台需要展示给更多的用户。后台采用的是ajax异步请... 查看详情

vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)

前言分享一下自己的ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下... 查看详情

vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)

前言vue-ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下的接口地址和... 查看详情