# Nuxt.js
-A third-party open source server-side rendering application framework based on the Vue.js ecosystem
-It can help us easily use the Vue.js technology stack to build isomorphic applications
-Official website: https://zh.nuxtjs.org/
-GitHub repository: https://github.com/nuxt/nuxt.js
## Initialize a Nuxt
- above sea level and nuxt
-Set "dev": "nuxt" in package.json
-Create pages folder
-Create index.vue
## Nuxt.js routing-routing navigation
-a label
-It will refresh the entire page and will render on the server side. Don't use it.
-nuxt-link component
- https://routervuejs.org/zh/api/#router-link-props
-The usage is basically the same as router-link
-Programmatic navigation
- https://router.vuejs.org/zh/guide/essentials/navigation.html
- @click = onClick
- this$router.push("/")
## Nuxt.js dynamic routing
-Add "_" before the file name of a file or folder, which is equivalent to /:
## Nuxt.js configuration file
- nuxt.config.js
router:{
base:'/app' 更改初始路径
extendRoutes(routes,resolve){ 自己配置路径
routes.push({
name:'name',
path:'/name',
component: resolve(__dirname,'pages/name.vue')
})
}
}
## Customize html template
-Create an app.html
<!DOCTYPE html>
<html {
{ HTML_ATTRS }}>
<head {
{ HEAD_ATTRS }}>
{
{ HEAD }}
</head>
<body {
{ BODY_ATTRS }}>
{
{ APP }} // 渲染的内容会注入到这里
</body>
</html>-Create a layouts/default.vue to extend the application layout
<template>
<Nuxt /> Be sure to leave the page exit of Nuxt
</template>
-There is a layout attribute under each component, the default value is default
-If you want to modify the layout of a page, you can set a new layout
## Nuxt.js asynchronous data asyncData method
- https://zh.nuxtjs.org/guide/async-data
-Basic usage
-It combines the data returned by asyncData with the data returned by the component data method to the component
-Call timing: during server-side rendering and before client-side routing updates
- Precautions
-Can only be used in page components
-** There is no this because it is called before the component is initialized
-In the static folder in Nuxt.js, internal files can be accessed directly through the address
-No need to add static when using: http://localhost:3000/data.json
-Use the asyncData method in the component to get the data and return an object, which will be mixed with the original data, which is equivalent to data = Object.assign({}, asyncData, data)
-Non-page components, such as public components, can be used by passing values from the parent component to the child component
-** When you want dynamic data to benefit SEO or to improve the rendering speed of the first screen, send a request to get the data in asyncData
** If it is non-asynchronous data or normal data, it can be initialized to data normally
## Nuxt.js Context Object
-Since there is no this in asyncData, asyncData(context){console.log(context)};
-Use the incoming context context to replace the role of this: context.route.params or context.params to get the url value