Nuxt的路由配置和参数传递

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

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

第一种：   

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

< a href="/" >home     

< a href="/about" > about

< a href="/zx" >  zx

第二种：

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

home

about

参数传递

接收参数

{{$route.params.newsId}}

路由的高级使用

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

about    

等于

about

about

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

about

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

zx-1

zx-1

4.tag               有时候想要  渲染成某种标签，例如

  于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

foo

foo

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

可查考 Vue router 官方

动态路由的参数校验

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

export default {

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

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

    }

}