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