vue快速入门(五十)重定向

news2024/11/20 9:40:11

注释很详细,直接上代码

上一篇

本篇建立在之前篇目前提下针对重定向进行演示

新增内容
路由重定向写法

源码

src/router/index.js

//导入所需模块
import Vue from "vue";
import VueRouter from "vue-router";
import myMusic from "@/views/myMusic.vue";
import findMusic from "@/views/findMusic.vue";
import attentionSigner from "@/views/attentionSigner.vue";
import recommendList from "@/views/recommendList.vue";
import rankingList from "@/views/rankingList.vue";
import songList from "@/views/songList.vue";
//调用函数将VueRouter插件安装为Vue的插件
Vue.use(VueRouter);

//配置路由规则
const routes = [
  //重定向
  { path: "/", redirect: "/MyMusic/recommendList" },
  {
    path: "/myMusic",
    component: myMusic,
    // 二级路由无需写'/'
    children: [
      {
        path: "recommendList",
        component: recommendList,
      },
      {
        path: "rankingList",
        component: rankingList,
      },
      {
        path: "songList",
        component: songList,
      },
    ],
  },
  {
    // 动态路由接受参数(后面加问号表示为可选参数)
    path: "/findMusic/:name?",
    component: findMusic,
  },
  {
    path: "/attentionSigner",
    component: attentionSigner,
  },
];

//创建路由实例
const router = new VueRouter({
  // 路由配置
  routes,

  //这里可以修改router-link的默认类名
  /*
    linkActiveClass:'my-active-class',
    linkExactActiveClass:'my-exact-active-class'
    */
});
//导出路由实例
export default router;

效果演示

在这里插入图片描述

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

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

相关文章

uniapp乡村社区户籍问外来人员管理系统 微信小程序python+java+node.js+php

基于微信小程序的外来人员管理系统项目的概述设计分析,主要内容有的私教预约平台系统平台的具体分析,进行数据库的是设计,数据采用MySQL数据库,并且对于系统的设计采用比较人性化的操作设计,对于系统出现的错误信息可以…

JZ71 变态跳台阶

😀前言 本文探讨了一个有关青蛙跳台阶的变体问题,与传统的台阶跳跃不同,这只青蛙每次可以跳上任意多的台阶。我们需要解决的问题是:对于给定的台阶数,计算青蛙跳上该台阶的所有可能方法。本文将通过动态规划和数学推导…

xftp破解版?No!xftp平替开源工具✔

文章目录 一、背景说明二、WindTerm介绍三、简单使用说明3.1 新建一个ssh连接窗口![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bfbe5114916e4a7e94ca0f9ceb05ca37.png)3.2 输入主机ip和端口号3.3 点击Continue3.4 输入密码3.5 登入成功3.6 下载文件到本地3.7 上…

Springboot(SSM)项目实现数据脱敏

目录 一、引入hutool的依赖 二、sql脚本 三、自定义注解代码 3.1 自定义注解 3.2 自定义一个枚举,用于定义脱敏的类型 3.3 序列化 四、使用脱敏注解 4.1 Person.java 4.2 controller 4.3 dao 五、源代码参考 一、引入hutool的依赖 <dependency><groupId>…

Ftrans文件外发系统 构建安全可控文件外发流程

文件外发系统是企业数据安全管理中的关键组成部分&#xff0c;它主要用于处理企业内部文件向外部传输的流程&#xff0c;确保数据在合法、安全、可控的前提下进行外发。 文件外发系统的主要作用包括&#xff1a; 1、防止数据泄露&#xff1a;通过严格的审批流程和安全策略&…

信创 | 信创产业人才需求与培养机制:优化策略与实践探索

信创产业的人才需求与培养机制面临着多方面的挑战和机遇。首先&#xff0c;信创产业的快速发展带来了巨大的人才需求&#xff0c;但目前人才培养供给与企业发展需求之间存在不匹配的问题。这种不匹配主要表现在课程体系不健全、产教融合不够深入、校企联动性不足以及职业培训市…

eNSP-DHCP服务配置

一、拓扑结构搭建 二、主机配置 pc1、pc2 三、路由器配置 <Huawei>sys #进入系统视图 [Huawei]int g0/0/0 #进图接口 [Huawei-GigabitEthernet0/0/0]ip address 192.168.0.1 24 #设置接口ip [Huawei-GigabitEthernet0/0/0]q #返回上一级 [Huawei]dhcp enable #开启DHCP服…

YOLOv5改进(一)MobileNetv3替换主干网络

前言 本篇博客主要讲解YOLOv5主干网络的替换&#xff0c;使用MobileNetv3实现模型轻量化&#xff0c;平衡速度和精度。以下为改进的具体流程~ 目录 一、改进MobileNetV3_Small 第一步&#xff1a;修改common.py,新增MobileNetV3 第二步&#xff1a;在yolo.py的parse_model函…

C++设计模式-结构型设计模式

写少量的代码来应对未来需求的变化。 单例模式 定义 保证一个类仅有一个实例&#xff0c;并提供一个该实例的全局访问点。——《设计模式》GoF 解决问题 稳定点&#xff1a; 类只有一个实例&#xff0c;提供全局的访问点&#xff08;抽象&#xff09; 变化点&#xff1a…

漏洞扫描神器:AppScan 保姆级教程(附破解步骤)

一、介绍 AppScan是IBM的一款应用程序安全测试工具&#xff0c;旨在帮助组织发现和修复应用程序中的安全漏洞。它提供了全面的功能和工具&#xff0c;用于自动化应用程序安全测试、漏洞扫描和漏洞管理。 以下是AppScan的一些主要特点和功能&#xff1a; 1. 自动化漏洞扫描&a…

RabbitMQ知识点总结和复习

之前项目中用到RabbitMQ的场景主要是订单信息的传递&#xff0c;还有就是利用RabbitMQ的死信队列属性设置&#xff0c;实现延迟队列效果&#xff0c;实现超时支付取消功能&#xff0c;以及在两个不同项目中传递数据等场景。 最近几年的工作中都是一直用的RabbitMQ&#xff0c;…

谈谈Tcpserver开启多线程并发处理遇到的问题!

最近在学习最基础的socket网络编程&#xff0c;在Tcpserver开启多线程并发处理时遇到了一些问题&#xff01; 说明 在linux以及Windows的共享文件夹进行编写的&#xff0c;所以代码中有的部分使用 #ifdef WIN64 ... #else ... #endif 进入正题&#xff01;&#xff01;&…

Word文件后缀

Word文件后缀 .docx文件为Microsoft Word文档后缀名&#xff0c;基于XML文件格式 .dotm为Word启用了宏的模板 .dotx为Word模板 .doc为Word97-2003文档&#xff0c;二进制文件格式 参考链接 Word、Excel 和 PowerPoint 的文件格式参考 Learn Microsoft

基于OpenCv的图像特征点检测

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

蓝桥杯练习系统(算法训练)ALGO-947 贫穷的城市

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 某城市有n个小镇&#xff0c;编号是1~n。由于贫穷和缺乏城市规划的人才&#xff0c;每个小镇有且仅有一段单向的公路通往别…

Activiti7 开发快速入门【2024版】

记录开发最核心的部分&#xff0c;理论结合业务实操减少废话&#xff0c;从未接触工作流快速带入开发。假设你是后端的同学学过JAVA和流程图&#xff0c;则可以继续向后看&#xff0c;否则先把基础课程书准备好先翻翻。 为什么要工作流 比起直接使用状态字段&#xff0c;工作…

上海计算机学会2021年1月月赛C++丙组T2康托表

题目背景 康托是一名数学家&#xff0c;他证明了一个重要的定理&#xff0c;需要使用一张表&#xff1a; 这个表的规律是&#xff1a; 从上到下&#xff1a;每一行的分子依次增大&#xff1b;从左到右&#xff1a;每一列的分母依次增大。 康托以一种不重复、不遗漏的方式&am…

旅游系列之:庐山美景

旅游系列之&#xff1a;庐山美景 一、路线二、住宿二、庐山美景 一、路线 庐山北门乘坐大巴上山&#xff0c;住在上山的酒店东线大巴游览三叠泉&#xff0c;不需要乘坐缆车&#xff0c;步行上下三叠泉即可&#xff0c;线路很短 二、住宿 长江宾馆庐山分部 二、庐山美景

基于ZYNQ7020的ARM+FPGA模块化仪器

模块化仪器平台基于 FPGA控制器&#xff0c; 搭配丰富灵活的仪器模块&#xff0c;如万⽤表、⽰波器、信 号发⽣器、数据记录仪、⾳频分析仪等&#xff0c;涵盖了⾼精度信号、⾼速与射频信号测试测量与处理&#xff0c;提供了从验证到试产到量产的全过程测试测量技术与解决⽅案&…

实景AI自动直播系统引领直播新时代,争做行业销量领跑者。

实景AI自动直播系统引领直播新时代&#xff0c;争做行业销量领跑者&#xff01; 在当今时代&#xff0c;随着科技的飞速发展&#xff0c;AI技术正逐渐渗透到各个行业中。马云曾明确指出&#xff0c;新兴事物经历着从“看不见”、“看不起”、“看不懂”到“来不及”的四个阶段。…