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. 路由跳转的方式
- 从以上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>
<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布局，例如后台项目里常出现的全局导航栏、侧边栏等
- 全局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. 错误页面
<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)
<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 ++
}
}
// 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>
网友评论