Vue-SSR学习笔记

1. 导航链接，超链接的书写形式，类似router-link
<!-- 导航链接 -->
<nuxt-link to="/users">userlist</nuxt-link>
2. 基础路由的展示
  • pages下的目录结构：
// 文件夹结构如下：
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. 路由跳转的方式
  • 从以上router.js文件我们可以看到每个路由都自动生成了name属性，这也可以用于路由跳转
<!-- 导航链接 -->
<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>
  • 动态id详情页：访问的url为 http://localhost:3000/users/1
  • 以下划线做文件名前缀的文件或目录会自动定义为动态路由
  • 在users文件夹下新增一个 _id.vue文件，路由跳转的写法以及此时router.js文件中自动生成的当前文件路由如下：
<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'
],
  • plugins文件夹下新增router.js文件
export default ({app}) => {
    // 参数app为执行上下文
    app.router.beforeEach((to, from, next) => {
        console.log(`我要去：${to.path}`)
        next()
    })
}
7. layout布局的设置：<nuxt />
  • 全局layout布局，例如后台项目里常出现的全局导航栏、侧边栏等
  • 全局layout在根目录下的layouts文件夹中配置，在已有的default.vue文件配置
// layout/default.vue
<template>
  <div>
    <div>这里是全局嵌入的部分，不需要配置路由，但会在每个页面显示，可用于全局导航菜单、侧边栏等</div>
    <nuxt />
  </div>
</template>
  • 部分页面的layout，例如用户模块页面的导航
  • 现在用户模块的路由名称，也就是文件夹的名称是users，那么就在根目录下的layouts文件夹中创建一个users.vue文件
  • 然后对应用户模块的父级路由文件中，也就是 pages/users.vue 与模块文件夹同名的vue文件，引入对应layout布局
// 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. 错误页面
  • layout目录下新增error.vue文件
<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方法的使用：异步数据获取
  • 该方法仅限于页面组件使用，通用组件不适用
  • 该方法可以在服务端或者前端路由更新之前被调用
  • 方法的第1个参数为当前页上下文对象
  • 该方法在组件中执行的时间早于组件生命周期
  • 方法中获取到的数据最终会和组件data中的同名变量合并
// 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
  • 执行 npm i @nuxtjs/axios，安装 @nuxt/axios，并配置 nuxt.config.js
modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
],
axios: {
    proxy: true
},
proxy: {
    "/api/": "http://localhost:3001/"
},
  • 创建server，监听端口和axios配置的代理接口一致
// 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)
  • 在serve文件夹下启动服务，执行命令 nodemon ./api.js，在浏览器中测试接口 http://localhost:3001/api/users/1，能看到正常的返回值就没问题了，正常返回users对象中name为tom的用户信息
  • 在 _id.vue 文件中正式测试调用接口
<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>
  • 处理请求拦截，可参考路由拦截，采用插件形式，在plugins文件夹中新建 axios.js
// 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，并将state、mutations等具名导出，也就是必须按照官方给的变量名导出(state、mutations、actions...)
// store/index.js
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter ++
  }
}
  • 建立对应模块需要的vuex文件，结构同上
// 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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,692评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,482评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,995评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,223评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,245评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,208评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,091评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,929评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,346评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,437评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,037评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2赞 354