nuxt路由的简单介绍
针对nuxt路由这个问题，本文将综合不同朋友对这个的知识为大家一起来解答，希望能帮到大家
本文内容目录一览：
Nuxt的路由配置和参数传递
Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。
如果想查看路由的配置，可以到 .nuxt 文件中可以看到详细配置
第一种：
/意思是跳到pages文件下的index页（页面在最外层） /about 意思是跳到about文件夹下的index页
第二种：
nuxt-link name的值对应文件中的index页面
参数传递
nuxt-link :to="{name='about',params={newsId:1002}}"/nuxt-link
接收参数
{{$route.params.newsId}}
1. to name是指向对应文件夹的index页，而path功能更全，更好玩，（写动态路由更方便，传参都一样）
等于
2.replace 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录
3.append 变成当前 (相对) 路径 我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
4.tag 有时候想要 渲染成某种标签，例如li 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
可查考 Vue router 官方
在动态路由页面下script -- export default中 写方法 vaildate
export default {
validate ({params}){ //路由当参传入
return /^\d+$/.test(params.newid) //正则比较
}
}
nuxt实现路由跳转的几种方法
下面分享，列表跳转详情的几种方法总结如下：
接上一篇 nuxt实现导航切换样式 ，相同目录结构
参数接收：
推荐使用 nuxt-link ，跳转页面，更利于seo收录，使用 this.$router.push 跳转相同路由存在一些问题。
nuxt路由及传参
最近的nuxt项目中经常会用到路由传参,故在此有所总结了下nuxt中传参的方式和vue项目中传参的方式
作为SSR的nuxt项目中路由是根据pages下的文件结构自动生成的，无需手动配置路由。很多时候项目需求，有列表页和详情页。
方式一： 如图：
详情页命名为 _id.vue (不要问我为什么要用这个名字 大概是nuxt默认)
nuxt路由的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、nuxt路由的信息别忘了在本站进行查找喔。
