nuxt.js1-4
Posted 小凡的耿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt.js1-4相关的知识,希望对你有一定的参考价值。
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的主要内容,如果未能解决你的问题,请参考以下文章