Nuxt的路由配置和参数传递

Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

如果想查看路由的配置，可以到 .nuxt 文件中可以看到详细配置

第一种：   

 /意思是跳到pages文件下的index页（页面在最外层）          /about  意思是跳到about文件夹下的index页   

< a href="/" >home</a>     

< a href="/about" > about </a>

< a href="/zx" >  zx </a>

第二种：

nuxt-link        name的值对应文件中的index页面

<nuxt-link :to="{name='index'}">home</nuxt-link>

<nuxt-link :to="{name='about'}">about</nuxt-link>

参数传递

<nuxt-link :to="{name='about',params={newsId:1002}}"></nuxt-link>

接收参数

{{$route.params.newsId}}

路由的高级使用

1.     to                      name是指向对应文件夹的index页，而path功能更全，更好玩，（写动态路由更方便，传参都一样）

<nuxt-link :to="{name='about'}">about</nuxt-link>    

等于

<nuxt-link :to="{path='/about'}">about</nuxt-link>

<nuxt-link :to="{path='/about',params={id:123}}">about</nuxt-link>

2.replace                      设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录

<nuxt-link :to="{path='/about'}"  replace>about</nuxt-link>

3.append               变成当前 (相对) 路径       我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<nuxt-link :to="{path='123'}"  append>zx-1</nuxt-link>

<nuxt-link :to="{path='/zx/123'}"> zx-1 </nuxt-link>

4.tag               有时候想要  渲染成某种标签，例如<li>  于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

<nuxt-link :to = "{path='foo'}"  tag='li'>foo</nuxt-link>

<li>foo</li>

nuxt-link   和  router-link 存在着 异曲同工之处

可查考 Vue router 官方

动态路由的参数校验

在动态路由页面下script -- export default中  写方法  vaildate

export default {

    validate ({params}){                              //路由当参传入

        return /^\d+$/.test(params.newid)      //正则比较

    }

}