nuxt.js笔记

一、Nuxt常用配置项
1、配置IP和端口：
开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1818

//package.json
  "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

配置好后，我们在终端中输入npm run dev，然后你会看到服务地址改为了127.0.0.1:1818.
2、配置全局CSS
在nuxt.config.js里进行操作：

//assets/css/normailze.css
html{
    color:red;
}
//nuxt.config.js
css:['~assets/css/normailze.css'],  //~表示nuxt项目根目录

二、Nuxt的路由配置和参数传递
基本路由：
Nuxt根据文件目录结构，自动给我们配置好了路由
路由跳转不要使用a标签，因为这样会有页面的刷新跳转
使用<nuxt-link></<nuxt-link>>标签

//index.vue
<template>
  <div>
      <h2>About Index page</h2>
      <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>
//news/index.vue
<template>
  <div>
      <h2>News</h2>
       <ul>
        <li>userId:{{$route.params.newsId}}</li>
         <li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
      </ul>
  </div>
</template>

三、Nuxt的动态路由和参数校验

动态路由：即带参数的路由
动态路由命名都以 _xx 为前缀，比如_id.vue，接收使用：$route.params.id来接收参数。
这里的id和动态路由的名称一样

动态参数校验：
进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法validate( )。

猜你喜欢