We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关于NuxtJS 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 除此之外，我们还提供了一种命令叫： nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站 点的功能。 我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一 步。 作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据 加载、中间件支持、布局支持等非常实用的功能。
安装
create-nuxt-app
page
pages\about.vue
<template> <div> <h1>About</h1> <!-- a链接 ： 刷新导航，服务端渲染--> <h2>a链接</h2> <a href="/">首页</a> <!-- router-link 导航链接组件 ： 单页面的体验方式--> <h2>router-link</h2> <router-link to="/">首页</router-link> <!-- 编程导航 --> <h2>编程导航</h2> <Button @click="onClick">首页</Button> </div> </template> <script> export default { name: "AboutPage", methods: { onClick(){ this.$router.push('/') } } }; </script>
编程式路由导航
你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。 创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件( .vue 文件) 内增加 用于显示子视图内容
<nuxt-child>
eg:nuxt.config.js
nuxt.config.js
/** * Nuxt.js配置文件 */ module.exports = { router: { base: '/abc', // routes: 一个数组，路由配置表 // resolve: 解析路由组件路径 extendRoutes(routes, resolve) { routes.push({ name: 'hello', path: '/hello', component: resolve(__dirname, 'pages/about.vue') //__dirname: 绝对安全的路径 }) } } }
app.html
<!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> <h1>app.html</h1> {{ APP }} </body> </html>
layout: 'blog'
layouts\blog.vue
<template> <div> <div>我的博客导航栏在这里</div> <nuxt /> </div> </template>
pages\index.vue
如何在服务端渲染动态页面
Nuxt.js 扩展了 Vue.js，增加了一个叫asyncData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据
asyncData
基本用法
注意事项
公共组件（**非页面组件**）没有办法使用 - 使用props传值
什么时候使用asyncData？
场景：当使用路由转跳<nuxt-link :to="'/article' + item.id">{{ item.id }}</nuxt-link>页面时，无法通过this.$route.params获取到id
<nuxt-link :to="'/article' + item.id">{{ item.id }}</nuxt-link>
this.$route.params
注入
context
_id.vue
<template> <div> <h1>{{ article.title }}</h1> <h1>{{ article.body }}</h1> </div> </template> <script> export default { async asyncData({ context }) { const { data } = await axios({ method: 'GET', url: 'http://localhost:3000/data.json' }) const id = Number.parseInt(context.params.id) return { article: data.posts.find(item => item.id === id)//匹配数据中的id } } } </script>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
介绍
Nuxt.js基本使用
初始化
安装
create-nuxt-app基本
page文件夹生成路由路由导航
pages\about.vue动态路由
嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
<nuxt-child>渲染到子路由处自定义路由配置
eg:
nuxt.config.jsNuxt.js视图
模板
app.html视图布局
layout: 'blog'，指定自定义布局组件layouts\blog.vuepages\index.vuelayout: 'blog'异步数据
asyncData
基本用法注意事项上下文对象
场景：当使用路由转跳
<nuxt-link :to="'/article' + item.id">{{ item.id }}</nuxt-link>页面时，无法通过this.$route.params获取到id注入asyncData 属性的context对象来访问动态路由数据_id.vueThe text was updated successfully, but these errors were encountered: