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

转载于:https://www.cnblogs.com/wang715100018066/p/10684224.html