Vue-SSR学习笔记

2020-06-10  本文已影响0人  闪电西兰花
1. 导航链接，超链接的书写形式，类似router-link
<!-- 导航链接 -->
<nuxt-link to="/users">userlist</nuxt-link>
2. 基础路由的展示
// 文件夹结构如下：
pages文件夹
 - users文件夹
     -- detail.vue
     -- index.vue

export const routerOptions = {
  mode: 'history',
  base: decodeURI('/'),
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/users",
    component: _38b2f737,
    name: "users"
  }, {
    path: "/users/detail",
    component: _75feff3c,
    name: "users-detail"
  }, {
    path: "/",
    component: _667c2d7e,
    name: "index"
  }],

  fallback: false
}
3. 路由跳转的方式
<!-- 导航链接 -->
<div>
    <nuxt-link to="/users">用户列表</nuxt-link>
    <button @click="$router.push('/users/detail')">用户详情</button>
    <button @click="$router.push({name: 'users-detail'})">用户详情</button>
</div>
4.动态路由
<button @click="$router.push({name: 'users-detail', query: { id: 1 }})">用户详情</button>

<button @click="$router.push({name: 'users-id', params: { id: 1 }})">id用户详情</button>

 {
    path: "/users/:id",
    component: _48335b5f,
    name: "users-id"
  },
5. 嵌套路由：与文件夹同名并且同级的vue文件就默认为父级路由
// 文件夹结构如下：
pages文件夹
 - users文件夹
     -- _id.vue
     -- detail.vue
     -- index.vue
 - users.vue

// 自动生成的路由结构如下
routes: [{
    path: "/users",
    component: _a833f098,
    children: [{
      path: "",
      component: _38b2f737,
      name: "users"
    }, {
      path: "detail",
      component: _75feff3c,
      name: "users-detail"
    }, {
      path: ":id",
      component: _48335b5f,
      name: "users-id"
    }]
    }, {
    path: "/",
    component: _667c2d7e,
    name: "index"
}]
6. 全局路由拦截：
// nuxt.config.js
plugins: [
    '@/plugins/router'
],

export default ({app}) => {
    // 参数app为执行上下文
    app.router.beforeEach((to, from, next) => {
        console.log(`我要去：${to.path}`)
        next()
    })
}
7. layout布局的设置：<nuxt /> 
// layout/default.vue
<template>
  <div>
    <div>这里是全局嵌入的部分，不需要配置路由，但会在每个页面显示，可用于全局导航菜单、侧边栏等</div>
    <nuxt />
  </div>
</template>

// layout/users.vue
<template>
  <div>
    <h1>用户相关布局页面</h1>
    <nuxt />
  </div>
</template>

// pages/users.vue
<template>
  <div>
    <h5>用户导航</h5>
    <nuxt-child></nuxt-child>
  </div>
</template>

<script>
  export default {
    layout: 'users'
  }
</script>
8. 错误页面
<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首页</nuxt-link>
  </div>
</template>

<script>
  export default {
    // 属性error为代码里的错误堆栈
    props: ['error']
  }
</script>
9. 修改浏览器标签页显示的页面标题
// pages/users/detail.vue
<template>
  <div>
    用户详情id：{{$route.query.id}}
  </div>
</template>

<script>
  export default {
    head: {
      title: '用户详情id='
    }
  }
</script>

// pages/users.vue
<template>
  <div>
    <h5>用户导航</h5>
    <nuxt-child></nuxt-child>
  </div>
</template>

<script>
  export default {
    layout: 'users',
    head: {
      title: '用户模块'
    }
  }
</script>
10. asyncData方法的使用：异步数据获取
// pages/users.vue
<template>
  <div>
    <h5>用户导航</h5>
    <nuxt-child></nuxt-child>
    <ul>
      <li
        v-for="user in users"
        :key="user.id"
      >{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
  // 模拟接口请求
  function getUsers () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([{name: 'asher', id: 1}, {name: 'jerry', id: 2}])
      }, 1500)
    })
  }

  export default {
    layout: 'users',
    head: {
      title: '用户'
    },
    // 在执行生命周期之前会先执行这个方法
    async asyncData () {
      // 判断当前方法在服务器还是客户端执行，返回true为服务端
      console.log(process.server)
      const users = await getUsers()
      // 这里return的数据最终会和data数据里的同名变量合并
      return {users}
    }
  }
</script>

// pages/users/detail.vue
<template>
  <div>
    用户详情id：{{$route.query.id}}
  </div>
</template>

<script>
  export default {
    async asyncData (query, error) {
      if(query.id) {
        return { user: { name: 'asher' } }
      }
      error({statusCode: 400, message: '请传递用户id'})
    }
  }
</script>
11. 整合axios 
modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
],
axios: {
    proxy: true
},
proxy: {
    "/api/": "http://localhost:3001/"
},

// server/api.js
const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router')
const router = new Router({prefix: '/api/users'})

const users = [{name: 'tom', id: 1}, {name: 'jerry', id: 2}]

router.get('/:id', ctx => {
  const user = users.find(u => u.id == ctx.params.id)
  if(user){
    ctx.body = {ok: 1, user}
  }else {
    ctx.body = {ok: 0}
  }
})

app.use(router.routes())
app.listen(3001)

<template>
  <div>
    <p>用户id：{{$route.params.id}}</p>
    <p>接口返回用户名：{{user.name}}</p>
  </div>
</template>

<script>
  export default {
    // 对象解构 从参数中解构出params axios
    async asyncData ({ params, $axios }) {
      const data = await $axios.$get(`/api/users/${params.id}`)
      // 异步函数返回的数据是已处理过的，也就是直接返回的是response.data中的数据
      if(data.ok) {
        return {user: data.user}
      }
      error({statusCode: 400, message: 'id有误，查询失败'})
    }
  }
</script>

// nuxt.config.js
plugins: [
    '@/plugins/router',
    '~/plugins/axios'
],

// plugins/axios.js
export default function ({$axios}) {
  $axios.onRequest(config => {
    if(!process.server) {
      config.headers.token = 'token1'
    }
  })
}
12. vuex：代码根目录下如果有store文件夹，那么Nuxt.js则默认启用vuex
// store/index.js
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter ++
  }
}

// store/users.js
export const state = () => ({
  list: []
})

export const mutations = {
  set (state, list) {
    state.list = list
  },
  add (state, name) {
    state.list.push({name})
  }
}

<template>
  <div>
    用户列表：
    <p @click="increment">计数: {{counter}}</p>
    <p>
      <input
        type="text"
        placeholder="添加用户"
        @keyup.enter="add($event.target.value)"
      >
    </p>
    <ul>
      <li
        v-for="user in list"
        :key="user.id"
      >{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'

function getUsers () {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{name: 'asher', id: 1}, {name: 'allen', id: 2}])
    }, 1500)
  })
}

export default {
  // fetch方法在创建组件前调用，早于asyncData，用于填充状态树，填充vuex对应模块数据
  fetch ({store}) {
    return getUsers().then(users => store.commit('users/set', users))
  },
  computed: {
    ...mapState(['counter']),
    ...mapState('users',['list'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapMutations('users', ['add'])
  }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读