nuxtjs 学习使用


// 列如在middleware目录中创建baseurl.js文件来定义中间件函数

import axios from 'axios'
export default function ({ route, store, redirect }) {
    if (store.state) {
        alert('抱歉您没有token，请先登录')
        return redirect('/search')
    }
}


// 之后在nuxt-config.js中配置，之后就可以在每一个页面中使用

router: {
    middleware: 'baseurl'    // 是js文件名字
}



// 但是如果不想在每一个页面中使用，可以在需要的页面中指定

// 指定中间件函数
middleware: 'baseurl',

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

"server":{
 "host":"127.0.0.1",
 "port":"3304"
}

1
2
3
4

export default function({ store, error, redirect }) {
  if (!store.state.user.userInfo.auth) {
      error({
       message: '没有权限哦！',
      statusCode: 403
     })
  }
}

1
2
3
4
5
6
7
8

<a @click="$router.push(`/strA-${'参数id'}.html`)">去到页面A</a>

1
2

获取当前路由名称

$nuxt.$route.path
获取当前路由路径

$nuxt.$route.name

1
2
3
4
5
6
7

// bad
<div v-if="isVip">

</div>

1
2
3
4

//good
<div>

</div>

1
2
3
4


8. nuxt项目`Failed to execute 'appendChild' on 'Node'`，有没有什么好办法？

nuxt项目，刷新页面之后报错`Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method`.有没有什么好的解决办法？



```javascript
1.
一般在开发环境下，日志会有warning:The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

但是不影响使用，而且一般都是在刷新当前页面的时候才会报这个警告。但是一旦build发布到线上就会发生DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method的问题。

我的解决方案是，直接在疑似产生The client-side rendered virtual DOM tree is not matching server-rendered content问题的代码上包裹一层<client-only>标签，直接不让后台渲染这部分代码就解决这个问题了

2. 使用 v-if 切换成 v-show

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

那就是在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }这句话

1

FANLE

Choose mode

nuxtjs 学习使用

nuxtjs 学习使用

# Nuxt 生命周期

# 重要的点

# tips

# 相关插件地址