Vue-SSR学习笔记

1. 导航链接，超链接的书写形式，类似router-link

userlist

2. 基础路由的展示

• pages下的目录结构：

// 文件夹结构如下：
pages文件夹
 - users文件夹
     -- detail.vue
     -- index.vue

• 这时访问路径分别是 http://localhost:3000/users 、http://localhost:3000/users/detail
• 同时观察根目录下 .nuxt 文件夹下的 router.js 文件，会发现生成的路由配置包含以下内容：

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属性，这也可以用于路由跳转

    用户列表
    用户详情
    用户详情

4.动态路由

• 带id查询参数的详情页：访问的url为 http://localhost:3000/users/detail?id=1

用户详情

• 动态id详情页：访问的url为 http://localhost:3000/users/1
• 以下划线做文件名前缀的文件或目录会自动定义为动态路由
• 在users文件夹下新增一个 _id.vue文件，路由跳转的写法以及此时router.js文件中自动生成的当前文件路由如下：

id用户详情

 {
    path: "/users/:id",
    component: _48335b5f,
    name: "users-id"
  },

5. 嵌套路由：与文件夹同名并且同级的vue文件就默认为父级路由

• 改变之后的用户详情页分别访问：http://localhost:3000/users/detail?id=1、http://localhost:3000/users/1

// 文件夹结构如下：
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布局的设置：

• 全局layout布局，例如后台项目里常出现的全局导航栏、侧边栏等
• 全局layout在根目录下的layouts文件夹中配置，在已有的default.vue文件配置

// layout/default.vue

• 部分页面的layout，例如用户模块页面的导航
• 现在用户模块的路由名称，也就是文件夹的名称是users，那么就在根目录下的layouts文件夹中创建一个users.vue文件
• 然后对应用户模块的父级路由文件中，也就是 pages/users.vue 与模块文件夹同名的vue文件，引入对应layout布局

// layout/users.vue

// pages/users.vue

8. 错误页面

• layout目录下新增error.vue文件

9. 修改浏览器标签页显示的页面标题

• 修改某个页面的标签页标题

// pages/users/detail.vue

• 修改某个模块的标签页标题，那么当前路由下的子路由对应的页面都显示同一个标签页标题

// pages/users.vue

10. asyncData方法的使用：异步数据获取

• 该方法仅限于页面组件使用，通用组件不适用
• 该方法可以在服务端或者前端路由更新之前被调用
• 方法的第1个参数为当前页上下文对象
• 该方法在组件中执行的时间早于组件生命周期
• 方法中获取到的数据最终会和组件data中的同名变量合并

// pages/users.vue

// pages/users/detail.vue

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 文件中正式测试调用接口

• 处理请求拦截，可参考路由拦截，采用插件形式，在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})
  }
}

• 在对应页面使用