Nuxt的路由配置和参数传递
简单路由Demo
我们现在根目录的pages文件下新建两个文件夹，about和news（模仿关于我们和新闻的功能模块，如果此处不清楚请看视频）。
在about文件夹下新建index.vue文件，并写入下面的代码：
<template> ?<div> ?????<h2>About Index page</h2> ?????<ul> ???????<li><a href="/">Home</a></li> ?????</ul> ?</div></template>
在news文件夹下新建index.vue文件，并写入下面的代码：
<template> ?<div> ?????<h2>News Index page</h2> ??????<ul> ???????<li><a href="/">Home</a></li> ?????</ul> ?</div></template>
修改原来的pages文件夹下的index.vue，删除没用的代码，写入下面链接代码：
<template> ?<div> ???<ul> ?????<li><a href="/">HOME</a></li> ?????<li><a href="/about">ABOUT</a></li> ?????<li><a href="/news">NEWS</a></li> ???</ul> ?</div></template> <script> export default { ?components: { ????}}</script> <style> </style>这个小例子作完，你会发现这一切太简单了，因为Nuxt.js都为我们作好了，不用写任何配置代码。
<nuxt-link>标签
虽然上面的例子跳转已经成功，但是Nuxt.js并不推荐这种<a>标签的作法，它为我们准备了<nuxt-link>标签（vue中叫组件）。我们先把首页的<a>标签替换成<nuxt-link>。
<template> ?<div> ???<ul> ?????<li><nuxt-link :to="{name:‘index‘}">HOME</nuxt-link></li> ?????<li><nuxt-link :to="{name:‘about‘}">ABOUT</nuxt-link></li> ?????<li><nuxt-link :to="{name:‘news‘}">NEWS</nuxt-link></li> ???</ul> ?</div></template> <script> export default { ?components: { ????}}</script> <style> </style>我们再次预览页面，也是可以进行正常跳转的，在实际开发中尽量使用<nuxt-link>标签的方法跳转路由。
params传递参数
路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。
我们先修改pages下的Index.vue文件，给新闻的跳转加上params参数，传递3306ID。
<template> ?<div> ???<ul> ?????<li><nuxt-link :to="{name:‘index‘}">HOME</nuxt-link></li> ?????<li><nuxt-link :to="{name:‘about‘}">ABOUT</nuxt-link></li> ?????<li><nuxt-link :to="{name:‘news‘,params:{newsId:3306}}">NEWS</nuxt-link></li> ???</ul> ?</div></template> <script> export default { ?components: { ????}}</script> <style> </style>在news文件夹下的index.vue里用$route.params.newsId进行接收，代码如下。
<template> ?<div> ?????<h2>News Index page</h2> ?????<p>NewsID:{{$route.params.newsId}}</p> ??????<ul> ???????<li><a href="/">Home</a></li> ?????</ul> ?</div></template>Nuxt的动态路由和参数校验
新闻详细页面：
我在news文件夹下面新建了_id.vue的文件，以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id来接收参数。
/pages/news/_id.vue
<template> ?<div> ?????<h2>News-Content [{{$route.params.id}}]</h2> ?????<ul> ???????<li><a href="/">Home</a></li> ?????</ul> ?</div></template>修改新闻首页路由
我们在/pages/news/index.vue进行修改，增加两个详细页的路由News-1和News-2。
<template> ?<div> ?????<h2>News Index page</h2> ?????<p>NewsID:{{$route.params.newsId}}</p> ??????<ul> ???????<li><a href="/">Home</a></li> ???????<li><a href="/news/123">News-1</a></li> ???????<li><a href="/news/456">News-2</a></li> ?????</ul> ?</div></template>代码写好后，打开npm run dev 进行查看，我们已经进入了新闻详细页，并在详细页中取得了传递过来的新闻ID。
动态参数校验
进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。
/pages/news/_id.vue
export default { ??validate ({ params }) { ???// Must be a number ???return /^\d+$/.test(params.id) ?} }我们使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面。
nuxt.js1-4
原文地址：https://www.cnblogs.com/xiaofandegeng/p/9073767.html