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的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数