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/1component: 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.mzph.cn/news/779514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov8本地、autodl环境配置、训练

目录 搭建本地环境安装miniconda3创建一个新的环境安装包 安装pycharm下载汉化导入解释器测试终端终端运行代码 YOLOv8本地训练数据集制作训练文件 YOLOv8 autodl训练流程注册账号充值选则服务器jupyterlab创建训练环境上传文件训练使用vscode SSH使用pycharm专业版SSH下载文件…

最大子序列(蓝桥杯,acwing,单调队列)

题目描述: 输入一个长度为 n 的整数序列,从中找出一段长度不超过 m 的连续子序列,使得子序列中所有数的和最大。 注意: 子序列的长度至少是 1。 输入格式: 第一行输入两个整数 n,m。 第二行输入 n 个数&#xff0…

Matlab|电动汽车充放电V2G模型

目录 1 主要内容 1.1 模型背景 1.2 目标函数 1.3 约束条件 2 部分代码 3 效果图 4 下载链接 1 主要内容 本程序主要建立电动汽车充放电V2G模型,采用粒子群算法,在保证电动汽车用户出行需求的前提下,为了使工作区域电动汽车尽可能多的消…

Mojo与Python——wsl安装mojo

文章目录 前言一、wsl设置二、安装步骤三、mojo初体验四、vscode联合开发总结 前言 此课程为系列课程,借助python语言来学习python语言的超集mojo。可以持续关注。 一、wsl设置 powershell查看wsl的版本,如果版本是1需要修改为2。 二、安装步骤 1.安装m…

浅试Kimi

最近KIMI大模型挺火的,擅长处理中文文本,咱也来试试吧! 测试问题: 写一篇800字以上的短片小说:主要故事是以一位上进但其他方面表现平平的大男孩小贱,刚到公司不久,就被一位名叫大弟的女同事看…

HarmonyOS 应用开发之多端协同

多端协同流程 多端协同流程如下图所示。 图1 多端协同流程图 约束限制 由于“多端协同任务管理”能力尚未具备,开发者当前只能通过开发系统应用获取设备列表,不支持三方应用接入。 多端协同需遵循 分布式跨设备组件启动规则。 为了获得最佳体验&…

数据分析之Power BI

POWER QUERY 获取清洗 POWER PIVOT建模分析 如何加载power pivot 文件-选项-加载项-com加载项-转到 POWER VIEW 可视呈现 如何加载power view 文件-选项-自定义功能区-不在功能区中的命令-新建组-power view-添加-确定 POWER MAP可视地图

知识图谱与大数据:区别、联系与应用

目录 前言1 知识图谱1.1 定义1.2 特点1.3 应用 2 大数据2.1 定义2.2 应用 3. 区别与联系3.1 区别3.2 联系 结语 前言 在当今信息爆炸的时代,数据成为了我们生活和工作中不可或缺的资源。知识图谱和大数据是两个关键概念,它们在人工智能、数据科学和信息…

保护电路设计 —(2)过温保护

保护电路设计 —(2)过温保护 上一讲讲到自锁电路设计,但有的同学还不太清楚怎么去复位这个电路,在这里给出一个例子,去复位这个电路。复位电路也非常简单,使用以下电路即可。如图1所示。 图1:复位电路 为…

HarmonyOS 应用开发之UIAbility组件间交互(设备内)

UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时,会涉及到启动特定的UIAbility,该UIAbility可以是应用内的其他UIAbility,也可以是其他应用的UIAbility(例如启动三方支付UIAbility)。 本文将从如下场景…

深入理解指针(7)函数指针变量及函数数组(文章最后放置本文所有原码)

一、函数指针变量 什么是函数指针变量呢? 既然是指针变量,那么它指向的一定是地址,而且我们可以通过地址来调用函数的。 函数是否有地址呢?地址是什么? 经过上面的测试可以看到函数也是有地址的,而且其地…

每日一练 两数相加问题(leetcode)

原题如下: 这道题目是一道链表题,我们对于这种链表类,很显然我们最后输出的是初始节点,所以我们要保留我们的初始头指针,那么我们的第一步一定是把头指针保留一份,然后再让头指针往后进行操作。那么我们进行…

C#热门技术应用:探索.NET Core与ASP.NET Core的前沿

C#热门技术应用:探索.NET Core与ASP.NET Core的前沿 随着信息技术的发展,C#作为微软开发的一款强大的面向对象编程语言,正在越来越多的领域发挥着关键作用。在.NET Core和ASP.NET Core的推动下,C#的发展和应用更是如日中天。今天&…

go中匿名函数的使用

匿名函数的使用 在Go语言中,不能像在Python那样在函数内部以常规方式定义一个具名函数。Go中的函数定义都必须在包级别进行。 不过可以通过匿名函数来实现类似的功能。匿名函数可以在函数内部定义并使用,这使得它们非常适合实现局部辅助函数的功能&…

基于Axios封装请求---防止接口重复请求解决方案

一、引言 前端接口防止重复请求的实现方案主要基于以下几个原因: 用户体验:重复发送请求可能导致页面长时间无响应或加载缓慢,从而影响用户的体验。特别是在网络不稳定或请求处理时间较长的情况下,这个问题尤为突出。 服务器压力…

android安卓餐厅点餐课设

一、引言 随着移动互联网的快速发展,手机应用已经成为我们日常生活中不可或缺的一部分。餐饮行业也积极借助移动应用的力量,提供更便捷、高效的点餐服务。本文将介绍一个基于安卓系统开发的餐厅点餐APP的课程设计项目,探讨其设计理念、功能特…

【容器源码篇】Map容器(HashTable,HashMap,TreeMap的特点)

文章目录 ⭐容器继承关系🌹Map容器🗒️HashTable源码解析构造方法put方法remove方法rehash扩容 🗒️HashMap源码解析构造函数get方法put方法详解 扩容方法详解 🗒️TreeMap源码解析 ⭐容器继承关系 🌹Map容器 键值对映…

如何在 Mac 上打开、编辑、复制、移动或删除存储在 Windows NTFS 格式 USB 驱动器上的文件 Tuxera NTFS for Mac使用教程

当您获得一台新 Mac 时,它只能读取 Windows NTFS 格式的 USB 驱动器。要将文件添加、保存或写入您的 Mac,您需要一个附加的 NTFS 驱动程序。Tuxera 他可以帮忙实现这一功能! Tuxera可以轻松转换驱动器:无论使用Windows PC还是Mac&…

OpenGL的MVP矩阵理解

OpenGL的MVP矩阵理解 右手坐标系 右手坐标系与左手坐标系都是三维笛卡尔坐标系,他们唯一的不同在于z轴的方向,如下图,左边是左手坐标系,右边是右手坐标系 OpenGL中一般用的是右手坐标系 1.模型坐标系(Local Space&…

42 ajax 下载文件未配置 responseType blob 导致的文件异常

前言 这是一个最近的关于文件下载碰到的一个问题 主要的情况是, 基于 xhr 发送请求, 获取下载的文件 然后 之后 xhr 这边拿到 字节序列之后, 封装 blob 来进行下载 然后 最开始我们这边没有配置 responseType 为 blob, arraybuffer, 然后 导致下载出来的 文件大小超过了…