NuxtJs入门

完全按照vue官网的ssr配置服务端渲染过于麻烦，所以有人开发了这个框架。无需繁琐的配置，按照官网文档Nuxt.js

安装：
确保安装了npx（npx在NPM版本5.2.0默认安装了）
npx create-nuxt-app 项目名

这里选择SSR

创建完成运行项目
文件项目结构

/assets 存放静态资源
/components 存放公共组件
/layouts 相当于正常vue项目中的app.vue
/middleware 存放中间件（暂时我也不知道是啥）
/pages 视图文件
/plugins 插件
/server 运行服务文件
/static 相当于正常vue项目的public文件夹
/store vuex文件
其他等一些同vue项目文件

Nuxt同Vue不同的是 路由不需要写 直接写在pages文件下访问

<nuxt /> 相当于 <router-view />
<nuxt-link to="/"> 相当于 <router-link to="/" />

访问/home页面

访问动态路由页面
新建_id.vue页面

此前已在home页面写好的动态路由

直接访问

路由重定向
方法1
在配置文件nuxt.config.js中定义
在module.exports里没有就新增一个router对象

// 路由重定向
router: {
  extendRoutes(routes, resolve) {
    routes.push({
      path: '/',
      redirect: '/view/signle-page'
    })
  }
}

方法2
在中间件文件/middleware新建一个文件redirect.js

export default function ({ route, redirect}) {
  if(route.fullPath === '/index') {
    return redirect('/view/signle-page')
  }
}

回到nuxt.config.js文件里新增一个middleware属性

// 路由重定向
  router:{
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/',
        redirect: '/view/signle-page'
      })
    },
    middleware: ['redirect']
  }

end