博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
阅读量:5370 次
发布时间:2019-06-15

本文共 1889 字,大约阅读时间需要 6 分钟。

Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link and isClient to navigate and avoid reloading data.

 

'fetch' can do server side rendering:

async fetch ({store, redirect, error}) {try {    const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos')    store.commit('init', res.data)  } catch (err) {    redirect('/error')  }}

Once it successfully store the data inside the store object, we don't need to fetch it again.

 

To avoid refetching the data, we can use 'isClient' from the context.

async fetch ({store, redirect, error, isClient}) {  if (isClient) {    return  }  try {    const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos')    store.commit('init', res.data)  } catch (err) {    redirect('/error')  }}

 

Because this fetch method can be reused in elsewhere, so we can make it a sprated file:

shared.js:

import axios from 'axios'export async function init ({store, redirect, error, isClient}) {  if (isClient) {    return  }  try {    const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos')    store.commit('init', res.data)  } catch (err) {    redirect('/error')  }}

Required it in side page:

Here we use 'nuxt-link' to the navigation.

 

Computed page should not load the todos again, since we already have the data store in the store object.

computed.vue:

 

转载于:https://www.cnblogs.com/Answer1215/p/7230822.html

你可能感兴趣的文章
Controller与View数据传递 多Model传递
查看>>
arm 汇编小练习
查看>>
RegQueryValueEx函数
查看>>
漫谈数据库索引
查看>>
【NOIP2004】合唱队形
查看>>
spring面试题
查看>>
python使用pickle,json等序列化dict
查看>>
php进行文件的强制下载
查看>>
每日python(6)
查看>>
Python正则表达式中的re.S的作用
查看>>
ubuntu15.10运行android studio出错unable to run mksdcard sdk tool
查看>>
HashMap面试知多少
查看>>
Effective C# 学习笔记(二十七)使你的类型可被序列化
查看>>
LDAP客户端配置
查看>>
(转)NAT原理与NAT穿越
查看>>
13.内存原理
查看>>
24.函数信号机制(本质上就是函数指针)
查看>>
The dependency `xxx` is not used in any concrete target.
查看>>
Bootstrap 中 下拉菜单和滚动监听插件(十一)(持续更新中。。。)
查看>>
团队-科学计算器-项目总结
查看>>