Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
我做了一个小例子：大家看一下就明白了
???<section class="container">
路由传值可以通过 $route.params.id 来接收参数。
???????<!-- 路由传值一个数组 idList ；
首先声明一个数组[{name:‘张三‘}，{name:‘李四‘},{name:‘王五‘}]
然后同级创建一个demo1.vue文件，里边内容自定义
--> ???????<nuxt-link :to="{name: ‘demo1‘ , params: {id: this.idList}}">demo1</nuxt-link><br> ?
???????<!-- 路由传值 同级创建一个demo2.vue 里边内容自定义；
demo2.vue文件内通过 $route.params.id 拿到 456
--> ???????<nuxt-link :to="{name: ‘demo2‘ , params: {id: 456}}">demo1</nuxt-link><br>
???????<!-- 多一个文件夹层级 project 下创建一个 demo3.vue；
路由用 - 链接为 ?project-demo3 ;
该demo3 是一个组件，传入的id为传值
--> ???????<nuxt-link :to="{name: ‘project-demo3‘ , params: {id: 789789}}">project-demo1</nuxt-link><br>
动态路由有一点需要说明一下：
以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id 来接收参数。
所以以下例子就是 文件夹project1 下有一个 _newsId.vue 文件
???????<!-- 动态路由 动态路由 动态路由 重要的说三遍，
同样的看到了 project1-newsId ?这个中划线后边的newsId不是一个组件，
而是动态传入的路由参数
--> ???????<nuxt-link :to="{name: ‘project1-newsId‘, params: {newsId: ‘nuxt-link动态路由‘}}">动态路由newsId </nuxt-link><br>
???????<a href="/project1/我是a超链接"> a超链接 动态路由 newsId </a> ???</section>
动态路由参数校验
进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法 validate( )。
export default { ??validate ({ params }) { ???// 必须为全数字 ???return /^\d+$/.test(params.newsId) ?} }单个组件meta设置
通过路由传过来的 title ； 在head方法里边配置；注意 hid 的值要与nuxt.config.js 里边的一样，要不然会重复创建，对搜索引擎不友好
export default { ???data () { ???????return ?{ ???????????title: this.$route.params.title ???????} ???}, ???head () { ???????return { ???????????title: this.title, ???????????meta: [ ???????????????{ hid: ‘description‘, name: ‘description‘, content: ‘hi-Sen‘ } ???????????] ???????} ???}}nuxt.js 路由 ， meta设置
原文地址：https://www.cnblogs.com/hai-cheng/p/8718106.html