vue router.js 传值,根据不同type显示不同内容

vue router.js 传值,根据不同type显示不同内容


el-bread 封装

router.js

import Vue from 'vue'
import Router from 'vue-router'

// 路由前缀
const { prefixBasePath } = require('../../config/basePath')

// 解决重复点击一个路由报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

const router = new Router({
  base: prefixBasePath, // 路由前缀
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      name: 'login',
      path: '/login',
      component: resolve => (require(['@/components/login'], resolve)),
      meta: {
        title: '登录',
        keepAlive: true
      },
    },
    {
      name: 'home',
      path: '/home',
      component: resolve => (require(['@/components/header/haveMenuIndex'], resolve)),
      meta: {
        title: '首页',
        keepAlive: true
      },
      children: [
        {
          name: 'mine',
          path: '/mine',
          component: resolve => (require(['@/components/mine'], resolve)),
          meta: {
            title: '个人中心',
            keepAlive: true,
          },
          children: [
            {
              name: 'news',
              path: 'news/:type', // 完整路由:/about/news/1
              component: resolve => require(['@/components/mine/financialAssist'], resolve),
              meta: {
                title: null,
                keepAlive: true,
              },
              beforeEnter: (to, from, next) => {
                // 根据type参数设置meta字段
                to.meta.title = to.params.type == 1 ? '已读信息' : to.params.type == 2 ? '未读信息' : '';
                next();
              }
            },
          ]
        },
        {
          name: 'about',
          path: '/about',
          component: resolve => (require(['@/components/about'], resolve)),
          meta: {
            title: '关于',
            keepAlive: true,
          }
        },
      ]
    },
  ]
})
// 路由守卫
router.beforeEach((to, from, next) => {
  next()
})
export default router

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/499469.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

书生·浦语大模型全链路开源体系-第1课

书生浦语大模型全链路开源体系-第1课 书生浦语大模型全链路开源体系-第1课相关资源课程笔记技术报告笔记 书生浦语大模型全链路开源体系-第1课 为了推动大模型在更多行业落地应用,让开发人员更高效地学习大模型的开发与应用,上海人工智能实验室重磅推出书…

SD-WAN与边缘计算的结合:开启网络性能

随着数字化转型的加速和云计算技术的发展,企业对网络性能和可靠性的需求越来越高。SD-WAN(软件定义广域网)和边缘计算作为两项重要的技术趋势,在提高网络性能和效率方面发挥着至关重要的作用。本文将探讨SD-WAN与边缘计算的结合如…

linux使用GDB调试段错误

前因:由于在做线程邮箱项目的过程中,遇到了段错误,情况如下: 代码量达到了500多行,使用打印难以实现,试着用GDB调试段错误。 调试过程: 1、使用gcc ./a.out -g 使用加-g来生成调试文件core …

三菱Q系列PLC以太网TCP通讯FB块源码

三菱Q系列PLC的tcp通讯,客户端和服务器两个变量好用的FB块,调用块就可以实现通讯连接,不需要自己写程序,简单配置引脚就可以。该块还集成了断网,连接错误,发送接收数据错误报警等功能。具体功能见下面介绍.…

【linux】基础IO |文件操作符

需要掌握:操作文件,本质:进程操作文件。进程和文件的关系 向文件中写入,本质上向硬件中写入->用户没有权利直接写入->操作系统是硬件的管理者,我们可以通过操作系统往硬件写入->操作系统必须提供系统调用&…

JavaScript邂逅

文章目录 Javascript内容邂逅JavaScript前端的三大核心计算机语言认识编程语言常见的编程语言编程语言的发展历史–机器语言阶段一: 机器语言 编程语言的发展历史–汇编语言阶段二:汇编语言 汇编语言的发展历史–高级语言阶段三:高级语言 机器语言和高级语言 认识JavaScriptJav…

大数据做「AI大模型」数据清洗调优基础篇

关于本文 近期一直在协助做AI大模型数据清洗调优的工作,主要就是使用大数据计算引擎Spark做一些原始数据的清洗工作,整体数据量大约6PB-8PB之间,那么对于整个大数据量的处理性能将是一个重大的挑战,关于具体的调优参数配置项暂时不…

面向对象特征一:封装性

9.1 为什么需要封装? 我要用洗衣机,只需要按一下开关和洗涤模式就可以了。有必要了解洗衣机内部的结构吗?有必要 碰电动机吗? 我要开车,我不需要懂离合、油门、制动等原理和维修也可以驾驶。 客观世界里每一个事物…

python图像界面改左上角窗口的的icon图标

目录 问题描述 解决办法 展示成功 结语 问题描述 Traceback (most recent call last): File "d:\桌面\python项目\py_boomer-master\py_boomer-master\微信公众号.py", line 20, in <module> window.iconbitmap(D:/桌面/python项目/3.png) # Correc…

主流电商平台api接口实时数据返回

主流电商平台的API接口可以实时返回一些常用的数据&#xff0c;包括但不限于以下几种&#xff1a; 商品数据&#xff1a;可以获取平台上的商品信息&#xff0c;包括商品名称、价格、库存等。 订单数据&#xff1a;可以获取用户下单的订单信息&#xff0c;包括订单号、下单时间…

快速识别PLC通讯中的两种主要应用方式

在工业自动化领域&#xff0c;PLC扮演着至关重要的角色。然而&#xff0c;许多人在初次接触PLC通讯时&#xff0c;常因其复杂性而感到困扰。事实上&#xff0c;PLC的通讯并不如人们想象中的那么神秘&#xff0c;它主要只有两种类型&#xff1a;一种是需要编写代码的通讯方式&am…

python coding with ChatGPT 专题1 | 树的直径

文章目录 定义题目特点 树的表示字典存储邻接表TreeNode类 深度优先 &#xff08;两次DFS法&#xff09;动态规划 &#xff08;树形DP&#xff09;优势 相似题目参考资料 定义 树上任意两节点之间最长的简单路径即为树的「直径」。 题目 给定一棵树&#xff0c;求出这棵树的…

vue3+ts | axios 二次封装

安装 pnpm i axios axios 二次封装 // 实用性工具文件 放于 utils文件中 // 对axios函数库进行二次封装&#xff1f; // 二次封装的目的&#xff1f;利用axios请求、响应拦截器 import axios from axios// axios.create 创建一个axios实例&#xff1a;可以设置基础路径&a…

探索数据结构:链式队与循环队列的模拟、实现与应用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 队列的定义 队列&#xff08;queue&#xff09;是一种只允许在一端进…

原来这就是线程安全(一)

TOC 一:什么是线程不安全?? 先看一段代码: public class Demo1 {public static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1new Thread(()->{for (int i 0; i < 50000; i) {count;}});Thread t2new Thread(()-&g…

Linux-进程控制

&#x1f30e;进程控制【上】 文章目录&#xff1a; 进程控制 为什么要有地址空间和页表 程序的内存       程序申请内存使用问题 写时拷贝与缺页中断 父子进程代码共享       为什么需要写时拷贝       页表的权限位       缺页中断 退出码和错误码…

P3369 【模板】普通平衡树(splay 算法)

题目描述 您需要写一种数据结构&#xff08;可参考题目标题&#xff09;&#xff0c;来维护一些数&#xff0c;其中需要提供以下操作&#xff1a; 插入一个数 x。删除一个数 x&#xff08;若有多个相同的数&#xff0c;应只删除一个&#xff09;。定义排名为比当前数小的数的…

Pytorch从零开始实战22

Pytorch从零开始实战——CycleGAN实战 本系列来源于365天深度学习训练营 原作者K同学 内容介绍 CycleGAN是一种无监督图像到图像转换模型&#xff0c;它的一个重要应用领域是域迁移&#xff0c;比如可以把一张普通的风景照变化成梵高化作&#xff0c;或者将游戏画面变化成真…

2024软件设计师备考讲义——UML(统一建模语言)

UML的概念 用例图的概念 包含 <<include>>扩展<<exted>>泛化 用例图&#xff08;也可称用例建模&#xff09;描述的是外部执行者&#xff08;Actor&#xff09;所理解的系统功能。用例图用于需求分析阶段&#xff0c;它的建立是系统开发者和用户反复…

4G/5G防爆布控球

#防爆布控球 #远程实时监控 #移动应急指挥 #高清图像采集 #防爆安全认证 4G/5G防爆布控球 M130-EX防爆布控球是针对石化装置、石油平台、燃气、化工、制药、煤炭、冶炼、船舶制造、纺织等易燃易爆环境及危险场所而开发设计的防爆智能一体化电气设备。 产品型号&#xff1a;M13…
最新文章