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

先看我的目录

如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的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

nuxt二级路由的更多相关文章

  1. 夺命雷公狗---node.js---17之项目的构建在node+express+mongo的博客项目2之一,二级路由

    然后我们就来开始搭建后台了... 不过后台我们可以来玩玩他的二级路由... 然后再去修改下他们的样式即可......修改方法和刚才那里的修改方法一样, 访问效果如下所示: OK,已经正常相识了

  2. vue-router 二级路由

    /** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...

  3. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  4. vue之二级路由

    router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...

  5. vue-router2.0二级路由的简单使用

    1.app.vue中 <template> <div id="app"> <router-view></router-view> & ...

  6. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  7. 链接进入react二级路由,引发的子组件二次挂载

    这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...

  8. vue-router 二级路由(父子路由)

    使用二级路由 会显示父路由下面的子路由  且父子路由同时显示 因为父子同时显示  路由地址在同一级别/ 路由的显示模式有两种(都是为了减少数据库后台请求次数) #hash模式(#是特殊字符,很多场合不 ...

  9. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

随机推荐

  1. diff比较两个文件 linux

    功能:比较两个文件的差异,并把不同地方的信息显示出来.默认diff格式的信息. diff比较两个文件或文件集合的差异,并记录下来,生成一个diff文件,这也是我们常说的补丁文件.也使用patch命令对 ...

  2. .NET项目引用黄色小三角以及找不到依赖的解决方法

    上图,问题描述: 经过查证,这个是引用的项目框架版本和本项目框架版本不一致的症状. 解决办法: 点击项目右键属性,调整版本使两个项目的版本一致 问题解决.good! ----------------- ...

  3. web (Servlet)

    1.如果你文档新建的出现很多红色的小擦擦出错 这样做

  4. Jquery如何获取某个元素前(后)的文本内容?

    <span> text here... <a id="target_element">百万创想</a></span> 如何获得a标签 ...

  5. ABAP表生成Java实体Bean

    项目中需要将HR模块中的表数据同步到Java系统中,向外围系统提供分发与查询服务,涉及到的表有两百多张,字段好几千上万个,如果手工一张张这些ABAP表在Java系统数据库中创建一遍的话,工作量将非常大 ...

  6. Docker Compose安装以及入门

    Docker Compose 是 Docker 官方编排(Orchestration)项目之一,负责快速在集群中部署分布式应用. Compose 简介 Compose 项目是 Docker 官方的开源 ...

  7. PL/SQL学习笔记之包

    一:包 包是由一组相关的函数,过程,变量,游标等PL/SQL程序设计元素的组合而成的一个PL/SQL程序单元,相当于Java中的类. 包的主要作用是封装:把相同或相似的东西归类,方便维护和管理,提高开 ...

  8. 市场风险~VaR的概述

    1.概念理解 VaR的含义:Value at Risk 按字面的解释就是"处于风险状态的价值",可译为受险价值.在险价值.风险价值等. 通常解释为:VaR是在一定置信水平和一定持有 ...

  9. 【PMP】项目管理ITTO概述

    1.项目整合管理

  10. html5利用websocket完成的推送功能(tomcat)

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...