耗费了大半天的时间，终于把页面的二级路由配置好了

先看我的目录

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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和pages/users.vue内容是一样的，没有哪一个文件，都会出错

注意，pages/index.vue下

  created () {
    this.$router.push('/users'); // 页面加载时跳转
  },

意思是加载二级路由的pages/users/index.vue页面

 

<template>
  <div style="height:100%;">
    <el-container style="height:100%;">
      <el-header class="header-con">
        <h1 class="header-title">xxx后台</h1>
      </el-header>
      <el-container style="height:100%;">
        <el-aside width="200px">
          <el-menu
              router
              :default-active="navselected"
              @select="selectItems"
              class="el-menu-vertical-demo">
              <el-menu-item index="/users/">
                <span slot="title">全局配置</span>
              </el-menu-item>
              <el-menu-item index="/users/ditch">
                <span slot="title">渠道列表</span>
              </el-menu-item>
              <el-menu-item index="/users/topUpType">
                <span slot="title">充值类型列表</span>
              </el-menu-item>
              <el-menu-item index="/users/topUpMoney">
                <span slot="title">充值金额列表</span>
              </el-menu-item>
              <el-menu-item index="/users/topUpMethod">
                <span slot="title">支付方式列表</span>
              </el-menu-item>
            </el-menu>
            <div class="menu-patch"></div>
        </el-aside>
        <el-main>
          <NuxtChild :key="key"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navselected: this.$store.state.page
    }
  },
  created () {
    this.$router.push('/users'); // 页面加载时跳转
  },
  computed: {
      key() {
          return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
      }
  },
  methods: {
    getNavType(){
        this.navselected = this.$store.state.page
    },
    selectItems(path){
      this.$store.commit('changePage',path);
      //按钮选中之后设置当前的index为store里的值。
      this.$router.push({
          path,
          query: {
          t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
          }
      })
    }

  },
  watch: {
      '$store.state.page': 'getNavType'
  }
}
</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格式。

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄