Article directory
Let's learn Nuxt2 here first, and then learn Nuxt3 in the future
installation project
npx create-nuxt-app <项目名>
routing
Nuxt.js will generate the routing configuration of the application based on all *.vue files in the pages directory,
that is to say, we can configure it directly, and the page structure corresponds to the page structure
We are in the pages directory, we can see that in the .next directory, there are related routing files generated, here is what nuxt does directly for us
Dynamic routing (from the official website)
To define a dynamic route with parameters in Nuxt.js, you need to create a corresponding Vue file or directory prefixed with an underscore.
Nuxt.js generates the corresponding routing configuration table as
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
Parameter check
Nuxt.js provides a method to verify parameters validate
export default {
validate({
params }) {
// 必须是number类型
return /^\d+$/.test(params.id)
}
}
Routing animation effect
global transition
We found the common css style of the configuration, and added two configurations in it.
In the nuxt.config.js configuration file, this place specifies the configuration file
module.exports = {
css:[
'@/assets/gobal.css'
]
}
.page-enter-active{
}
.page-leave-active{
}
partial transition
Routing guards (global, local)
asynchronous data
Nuxt.js provides the asyncData method, so that we can asynchronously obtain or process data before setting the data of the component
Nuxt.js has many ways to call asyncData
Promise method
export default {
asyncData({
params }) {
return axios.get(`https://my-api/posts/${
params.id}`).then(res => {
return {
title: res.data.title } // 相当于data中的数据，可以{
{}}进行调用
})
}
}
plug-in
There is a plugins folder under the root directory of nuxt, which is the file directory where plugins are usually stored, and then you can use plugins through the plugins configuration in nuxt.config.js
Nuxt.js allows you to execute js before running Vue.js applications plugin. This is especially useful when you need to use your own libraries or third-party modules.
Layers
Middleware - middleware
Vuex state tree
API (only some key APIs are mentioned here)
asyncData
nuxt.js allows asynchronous fetching of data before component rendering
- During server-side rendering, the asyncData method will be called before the component is instantiated to ensure that the data is fetched before the HTML is rendered
- During client rendering, the asyncData method will be called when the route parameters change to ensure that the latest data is obtained when switching routes
Therefore, the asyncData method can obtain data in both the server and client environments, and can ensure that the data is obtained before the component is rendered , thereby ensuring the performance and accessibility of the page
some key packages
nuxt/axios
My other blog (Nuxt.js - nuxt/axios)