nuxt 路由、过渡特效、中间件的实现代码


Posted in Javascript onNovember 06, 2020

在pages下的文件.vue文件会被自动加载成路由

0、声明式导航

<nuxt-link to="/">首页</nuxt-link>

用法和router-link用法一致

1、定义一级路由

在pages下创建.vue文件,访问路径后加上/文件名,访问

index.vue对应的路径为'/';

2、创建多级路由

在pages创建文件夹,文件夹内创建.vue文件

访问路径:/文件夹名/文件名

pages/

--| user/

-----| index.vue

-----| one.vue

--| index.vue

将被转换成:

router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'user',
  path: '/user',
  component: 'pages/user/index.vue'
  },
  {
  name: 'user-one',
  path: '/user/one',
  component: 'pages/user/one.vue'
  }
 ]
 }

3、动态路由参数

以一个_下划线作为前缀的Vue文件或目录。

获取参数this.$route.params.键名 _名称会变成/:名称

pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue
 
 router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'users-id',
  path: '/users/:id?',
  component: 'pages/users/_id.vue'
  },
  {
  name: 'slug',
  path: '/:slug',
  component: 'pages/_slug/index.vue'
  },
  {
  name: 'slug-comments',
  path: '/:slug/comments',
  component: 'pages/_slug/comments.vue'
  }
 ]
 }

4、动态路由参数验证

和data同级

validate({params}) { 
 console.log(params.键名); 

// 如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error , Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

return true;
 }

5、嵌套路由

x.vue的嵌套路由,先传键x文件夹,其内部的.vue文件将成为其嵌套路由

父组件<nuxt-child/>显示嵌套子组件内容

pages/
 --| users/
 -----| _id.vue
 -----| index.vue
 --| users.vue
 
 router: {
 routes: [
  {
  path: '/users',
  component: 'pages/users.vue',
  children: [
   {
   path: '',
   component: 'pages/users/index.vue',
   name: 'users'
   },
   {
   path: ':id',
   component: 'pages/users/_id.vue',
   name: 'users-id'
   }
  ]
  }
 ]
 }

6、命名视图

<nuxt name="components中的名称"/> 或 <nuxt-child name="components中的名称"/>

在nuxt.config.js中添加路由扩展配置

router: {
  extendRoutes(routes, resolve) {
  
  //查找要使用命名视图的组件,获取index
  const index = routes.findIndex(route => route.name === '路由名称')
  
  routes[index] = {
  //将查找的路由之前配置解构
   ...routes[index],
   
   //添加components和chunkNames扩展路由配置来使用命名路由
   components: {
   default: routes[index].component,
   //自定义名称: resolve(__dirname, '显示的组件路径/.vue')
   },
   
   chunkNames: {
   //自定义名称: '显示的组件路径/.vue'
   }
  }
  }
 }

7、过渡动效

(1)全局过渡动效

让每一个页面的切换都有淡出 (fade) 效果

1、在全局样式文件 assets/x.css 里添加一下样式:

.page-enter-active,
 .page-leave-active {
  transition: opacity 0.5s;
 }
 .page-enter,
 .page-leave-active {
  opacity: 0;
 }

2、nuxt.config.js文件中

css: ['assets/x.css']

(2)某个页面自定义过渡特效

1、在全局样式 assets/x.css 中添加一下内容:

.test-enter-active,
.test-leave-active {
 transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
 opacity: 0;
}

2、nuxt.config.js文件中

css: ['assets/x.css']

3、在组件中和data同级

transition: 'test'

8、中间件

中间件允许定义一个自定义函数运行在一个页面或一组页面渲染之前。

(1)在middleware文件夹下创建.js文件,文件名的名称为中间件名称

export default function(context){

 //接收一个context上下文对象作为参数
 ...
 //context.route可获取路由信息
 }

异步中间件:返回Promise即可

(2)在每个页面执行中间件

nuxt.config.js中添加

router: {
 middleware: '中间件名称'
 }
 }

(3)指定的布局或者页面

组件中与data同级,添加:

middleware: '中间件名称'

9、路由重定向

方式一:

组件中

asyncData(context, callback) {
 context.redirect('/');
 },

方式二:

定义中间件

export default function(context)
 {
 if(context.isHMR)
 {
 return; 避免热更新时,重新走一遍
 }

  if(context.route.fullPath==='/xxx)
  {
  context.redirect('/x')
  }
 }

将中间件在nuxt.config.js中配置成全局或单独配置组件

10、路由高亮

方式一:

router: {
  linkActiveClass: 'active-link'或
  linkExactActiveClass: 'exact-active-link'
 }

方式二:

直接添加类名,style不能有scoped属性

.nuxt-link-exact-active 父路由不高亮

.nuxt-link-active 父路由也会高亮

方式三:

每个nuxt-link标签上添加activeClass=‘类',再定义类的样式

11、配置路由模式

在nuxt.config.js中

router:{
 mode:'hash'
 }

补充知识:nuxt 设置路由的meta属性,nuxt 怎么设置路由的meta,nuxt 怎么设置router的meta

nuxt 官网说的 专注于UI的渲染,作者想试一下用来写后台管理的界面感觉何如,可以开启 spa模式,或者不改变,也会有不一样的体验哦.

基于nuxt.js的管理后台项目,一个项目部署,可以一站式管理数据库和你的业务的增删改查操作,项目暂未完善,待完善后开源于github

一个问题,想了好多种办法,终于用了一个笨方法解决了这个问题

如下所示:

routes.js 如下:

/**
 * nuxt的路由菜单配置
 * @description 仅仅只用于侧边栏的菜单显示和权限,其它的不做任何功能
 */
const menus = [{
    meta: {
      requireAuth: false, //菜单权限
      title: '系统首页', //菜单名
      icon: 'fa fa-bar-chart', //菜单图标
    },
    path: "/dashboard",
    name: "dashboard",
  },
  {
    meta: {
      requireAuth: false, //菜单权限
      title: '欢迎页', //菜单名
    },
    path: "Welcome",
    name: "dashboard-Welcome"
  },
  {
    meta: {
      requireAuth: false, //菜单权限
      title: '示例功能', //菜单名
      icon: 'fa fa-bar-chart', //菜单图标
    },
    path: "/demos",
    name: "demos",
  },
  {
    meta: {
      requireAuth: false, //菜单权限
      title: '列表Demo', //菜单名
    },
    path: "List",
    name: "demos-List"
  },
  {
    meta: {
      requireAuth: false, //菜单权限
      title: '列表详情', //菜单名
    },
    path: "List/Detail/:id?",
    name: "demos-List-Detail-id"
  },
  {
    meta: {
      requireAuth: false, //菜单权限
      title: '数据分析', //菜单名
      icon: 'fa fa-bar-chart', //菜单图标
    },
    path: "/datas/UserAnalysis",
    name: "datas-UserAnalysis"
  },
  {
    path: "/",
    name: "index"
  }
];
 
 
/**
 * 递归查询路由权限
 * @param {*} list
 * @param {*} menu
 */
const iterator = (list) => {
  for (let item in list) {
    for (const m in menus) {
      if ((list[item].name === menus[m].name) && (list[item].path === menus[m].path)) {
        console.log((list[item].name === menus[m].name) && (list[item].path === menus[m].path));
        list[item].meta = menus[m].meta;
        list[item].meta.requireAuth = true;
      }
    }
    if (list[item].children && list[item].children.length > 0) {
      iterator(list[item].children);
    } else {
      return list;
    };
  }
};
 
export default (routes, resolve) => {
  routes = iterator(routes);
  console.log(routes);
};

nuxt 路由、过渡特效、中间件的实现代码

然后设置nuxt.config.js

nuxt.config.js 如下配置:

router: { //中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
    middleware: ['authorities'],
    extendRoutes: routes
  },

nuxt 路由、过渡特效、中间件的实现代码

这个问题暂时得到了解决,可以根据routes生成标签导航/侧边栏菜单/面包屑导航等:

nuxt 路由、过渡特效、中间件的实现代码

以上这篇nuxt 路由、过渡特效、中间件的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
javascript实现前端分页功能
Nov 26 Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 #Javascript
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
actionscript与javascript的区别
2011/05/25 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python中property函数用法实例分析
2018/06/04 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python怎么提高计算速度
2020/06/11 Python
python遍历路径破解表单的示例
2020/11/21 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
部门年终奖分配方案
2014/05/07 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
初中班主任教育随笔
2015/08/15 职场文书
校园安全教育心得体会
2016/01/15 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书