深入浅析nuxt.js基于ssh的vue通用框架

yarn global add @vue/cli-init
npm init nuxt-app my-project // 初始化一个nuxt项目

module.exports={
  css: ['@/assets/css/normailize.css'] // @别名，根目录 
}

head: {
  title: 'nuxt项目实战',
  meta: [
   {charset: 'utf-8'},
   {name: 'viewport', content: 'width=device-width, initial-scale=1'},
   {hid: 'description', name: 'description', content: pkg.description}
  ],
  link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}]
 },

.page-enter-active,      //页面进入激活的效果和页面离开的动效
.page-leave-active {
 transition: opacity 1s;
}
.page-enter,         // 页面进入和页面离开激活的效果
.page-leave-active {
 opacity: 0;
}

.test-enter-active,
.test-leave-active {
 transition: all 1s;
 font-size: 12px;
}
.test-enter,
.test-leave-active {
 opacity: 0;
 font-size: 40px;
}

export default {
 transition: 'test'
}

module.exports = {
  loading: {color: '#fff'},
}

<nuxt-link :to="{name:'index'}">Home</nuxt-link> //可以根据to，path跳转，同样可以传参params,query
 <nuxt-link :to="{name:'about',query:{id:123}}">about</nuxt-link>

pages/
--| news/
-----| _id.vue
-----| index.vue
在index.vue中要根据不同的id跳到新闻详情页，这里有2种跳转方式，通过path和name
<nuxt-link :to="{path:'/news/123'}">news-1</nuxt-link>
<nuxt-link :to="{name:'news-id',params:{newdetail:'fff'}}">news-32</nuxt-link>
在_id.vue中可以接收到参数{{$route.params.newdetail}}

export default {
 validate ({ params，query}){
  // 必须是number类型
  return /^\d+$/.test(params.id)
 }
}

module.exports = {
  router:{
  middleware: 'check-auth'
 }
}