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

先看我的目录

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

    http://www.nat32.com/ SinforNat WinGate

  2. C# 坐标系

    C#坐标系 一.概述 从数学角度讲,Point是一个二维矢量,包含两个公共整型属性,属性用大写X和Y(c#中公共属性一般约定以大写字母开头).当坐标不是整数值是float时,用PointF代替Poin ...

  3. idea的debug模式启动运行慢

    今天发现idea的debug模式启动运行特别慢,查找原因是因为在多个方法上打了断点导致,关闭断点问题解决. 关闭断点方法为: 

  4. NOIP2010提高组 机器翻译

    OJ提交地址:https://www.luogu.org/problemnew/show/P1540 http://noi.openjudge.cn/ch0112/07/ 总时间限制: 1000ms  ...

  5. 听闻 kubernetes,快速了解一番

    看到 各位 大厂都在用这个,  而本人最多是用yarn 做些ML的事情,   赶快了解一下, 先扫盲记录一下. 一.名称趣闻 kubernetes缩写为k8s, 阿哈 ,原来是:k8s,意思就是k后面 ...

  6. java 定时任务之一 @Scheduled注解(第一种方法)

    使用spring @Scheduled注解执行定时任务: 运行!!! 关于Cron表达式(转载) 表达式网站生成: http://cron.qqe2.com/  直接点击 作者:http://blog ...

  7. Java密码体系结构简介:Java Cryptography Architecture (JCA) Reference Guide

    来自Java官方的文档,作备忘使用. 简介: Java平台非常强调安全性,包括语言安全,密码学,公钥基础设施,认证,安全通信和访问控制. JCA是平台的一个主要部分,包含一个“提供者”体系结构和一组用 ...

  8. Springboot2.x 集成jsp

    1.添加pom依赖 <!--引入springboot 内嵌tomcat对jsp的解析包--> <dependency> <groupId>org.apache.to ...

  9. notepad++ 复制代码--高亮 - 带颜色

    思路来源:http://blog.csdn.net/super828/article/details/72826024 选择代码,然后右键选择菜单命令

  10. Effective Java 第三版——70. 对可恢复条件使用检查异常,对编程错误使用运行时异常

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...