nuxt二級路由

耗費了大半天的時間，終於把頁面的二級路由配置好了

先看個人目錄

若是沒有登錄頁，根本就不用考慮嵌套路由的問題，主要的menu跳轉和<nuxt />能夠直接寫到layouts/default.vue中，首頁能夠放到pages/index.vue，就能夠了。

好了，步入核心的

情景，在中間件middleware/authenticated.js

// 定義了一箇中間件， 若是用戶未登陸， 則跳轉登陸頁。
export default function ({
  store,
  redirect
}) {
  if (!store.state.user) {
    return redirect('/login')
  }
}

首先，須要知道，pages/index.vue這個文件必須有，這是給路由'/'，定義的頁面，可是我真正的首頁是在user/index.vue

pages/index.vue下

<template>
  <div style="height:100%;">

  </div>
</template>

<script>
export default {
  created () {
    console.log(this.$router)
    this.$router.push('/login') // 頁面加載時跳轉
  }
}
</script>

 

意思是加載二級路由的pages/users.vue頁面

<template>
  <div style="height:100%;">
    <el-container style="height:100%">
      <el-header class="theme-bg-color">
        <my-head />
      </el-header>
      <el-container style="height:100%;">
        <my-side />
        <el-main>
          <NuxtChild :key="key"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MySide from '~/components/MySide.vue'
import MyHead from '~/components/MyHead.vue'
export default {
  components: {
    MySide,
    MyHead
  },
  computed: {
      key() {
          return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
  }
}
</script>

 

注意，在pages/users/index.vue頁面中

export default {
  name: 'users'
}

其餘頁面，好比pages/users/ditch.vue頁面中

export default {
  name: 'users-ditch'
}

必定要這樣去寫name，官網上也是這樣說明的。

 

總結，嵌套路由（二級路由寫法）

一，頁面有個user.vue,文件夾也要有個同名的user；

二，最好有index.vue頁面；

三，name格式。

源碼地址：

https://github.com/besswang/rj-payadmin-nuxt