Nuxt----使用

簡單使用

　　在layouts中定義一個test.vue，內容以下

 

　　在user中定一個index.vue

• 若是沒有寫 layout:"test"，就會引入默認的 layout:"default"

 

　　啓動程序，npm run dev，訪問localhost:10000/user

路由

　　Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。 

嵌套路由

　　在page目錄下穿件一個user.vue（名字須要和裏面的某一個目錄名字同樣，咱們一user爲例），當咱們訪問/user/index.vue的時候，就會訪問 /user.vue，若是user.vue中添加了<nuxt-child/>，index.vue中的內容就會替換<nuxt-child/>。

• user.vue

 

•  效果圖

獲取url中的參數

• /xx/2 -->獲取2使用 this.$route.params.id;
• /xx?id=2-->獲取參數，使用 route.query.page

 

 

 　　訪問：http://localhost:10000/user/1

 

請求數據（使用服務器渲染技術）

　　使用asyncData()方法，在該方法中來請求後臺的數據；

　　此時渲染數據就是經過Nuxt.js類執行了，咱們直接查看源代碼能夠顯示name:小明的同窗，而id：後面卻不能有相應的值；

　　而且asyncData()中不能寫一些前端的代碼，好比alter()，就會報錯

 

異步調用

　　觀察客戶端，並無按照方法執行的順序輸出，使用Promise實現了異步調用。

<script>
  export default {
    layout: 'test',
    async asyncData() {
      console.log("服務器打印數據")
      return {
        name: '小明同窗'
      }
    },
    data() {
      return {
        id: ''
      }
    }
    ,
    methods: {
      a() {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            //alert(1)
            resolve(1)
          }, 2000)
        })
      },
      b() {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            //alert(2)
            resolve(2)
          }, 1000)
        })
      }
    },
    mounted() {
      this.id = this.$route.params.id;
      this.a().then(res => {
        alert(res)
      })
      this.b().then(res => {
        alert(res)
      })
    }
  }
</script>

同步調用

　　使用async/await完成同步調用 

<script>
  export default {
    layout: 'test',
    async asyncData() {
      console.log("服務器打印數據")
      //定義a方法,直接會調用
      var a = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          //返回a
          console.log("a")
          //必須有返回值,否在會堵塞在這
          resolve("a")
        },2000)
      });
      //定義b方法
      var b = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          console.log("b")
          resolve("b")
        }, 1000)
      });
      return {
        name: '小明同窗'
      }
    },
    data() {
      return {
        id: ''
      }
    },
    mounted() {
      this.id = this.$route.params.id;
    }
  }
</script>

 

分頁

 　　部分代碼，只能進行頁面刷新，從新生成html，由於爲了SEO，不能使用ajax來進行數據的渲染，只能從新刷新頁面，讓nuxt.js 來請求後端，獲取數據，將html和數據整合返回給瀏覽器

methods:{
      //分頁觸發
      handleCurrentChange(page) {
        //當前頁碼
        this.page = page
        //將當前頁碼設置到route中
        this.$route.query.page = page
        //將route中全部參數轉成key/value串
        let querys = querystring.stringify(this.$route.query)
        window.location = '/course/search?'+querys;
      },