nuxt - 路由

页面路由跳转

场景: pages的about和new文件夹下有index.vue页面
解决：

• 直接a标签，但不建议

   // pages/index.vue
   <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/new">新闻</a></li>
  

• <nuxt-link>

    // pages/index.vue
    <ul>
     <li><nuxt-link :to="{name: 'index'}">首页</nuxt-link></li>
     <li><nuxt-link href="{name: 'about'}">关于</nuxt-link></li>
     <li><nuxt-link href="{name: 'new'}">新闻</nuxt-link></li>
     // 若存在参数传递,即动态路由
     <li><nuxt-link href="{name: 'new'，params: {newId: 66}}">新闻</nuxt-link></li>
  

动态路由： 就是带参数的路由。

• 在new文件夹下新建_id.vue(下划线为前缀的vue文件就是动态路由页面）

• 取参数id即在目的页面_id.vue中通过$route.params.id获取

参数校验
nuxt.js提供了对参数的正确性进行校验的方法

  export default {
     validate ({ params }) {
       // must be a number
      return /^\d+$/.test(params.id)
      // 如果false会自动进入error页面
     }
  }

路由动画（页面切换效果）

• 1、全局路由动画
  全局css中配置 （默认属性开头为page）

    .page-enter-active, .page-leave-active {
        transition: opacity 2s;
     }
    .page-enter, .page-leave-active {
        opacity: 0;
     }     
  

！！！注意 这种页面切换效果必须是通过<nuxt-link>制作跳转链接的

• 2、页面单独设置动效 transition

    // 全局样式
    .test-enter-active, .page-leave-active {
        transition: opacity 2s;
     }
    .test-enter, .page-leave-active {
        opacity: 0;
     }     
   // 单独页面
  export default {
      transition: 'test'
  }