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

embedded/2024/9/23 7:33:56/

注释很详细,直接上代码

上一篇

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

新增内容
路由重定向写法

源码

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.ppmy.cn/embedded/38042.html

相关文章

三层交换机与防火墙连通上网实验

防火墙是一种网络安全设备,用于监控和控制网络流量。它可以帮助防止未经授权的访问,保护网络免受攻击和恶意软件感染。防火墙可以根据预定义的规则过滤流量,例如允许或阻止特定IP地址或端口的流量。它也可以检测和阻止恶意软件、病毒和其他威…

学习大数据,所需更要的shell基础(2)

文章目录 read读取控制台输入函数系统函数bashnamedirname 自定义函数Shell工具(重点)cutawk 正则表达式入门常规匹配常用特殊字符 read读取控制台输入 1)基本语法 read (选项) (参数) ①选项: -p:指定读取值时的提示…

SARscape操作:GF3 数据预处理

1、设置 Prefrences 参数 点击 SARscape->Preferences->Preferences specific,弹出如下图所示的对话框; 点击 Load Preferences,在弹出的菜单栏中选择适用于GF3影像处理的 MR(between 10m and 30m) 模式; 点击 General p…

DAY 3

1. #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {this->resize(540,415);this->setFixedSize(540,415);//窗口标题this->setWindowTitle("盗版QQ");//窗口图标this->setWindowIcon(QIcon("E:\\qq\\pictrue\\pi…

onedrive下載zip檔案有20G限制,如何解決

一般來說,OneDrive網頁版對文件下載大小的限制如下圖所示,更多資訊,請您參考這篇文章:OneDrive 和 SharePoint 中的限制 - Microsoft Support 因此我們推薦您使用OneDrive同步用戶端來同步到本地電腦,您也可以選擇只同…

C盘下.m2文件名夹,以及文件详解

${user.home}/.m2/repository文件夹 是maven默认的本地仓库地址 maven仓库分为远程仓库和本地仓库,当你在pom里配置依赖项目后,maven首先会从本地仓库查找该项目,如果没有找到则通过配置的地址或默认地址(如果没有配置远程仓库地…

Docker入门篇来啦~

文章目录 1虚拟化技术1.1 硬件级虚拟化1.2 操作系统级虚拟化 2 Docker是什么2.1 Docker介绍2.2 容器和虚拟机的区别2.3 为什么使用Docker 3 Docker运行环境部署3.1 Docker安装3.2 Docker服务启动 4 Docker核心组件4.1 镜像4.1.1 镜像的基本概念4.1.2 镜像的组成结构4.1.3 镜像的…

TIPS:MySQL按给定时间间隔分组统计

MySQL按给定时间间隔分组统计 需求一,查询每天8点到23点的数据 在MySQL中,若要查询在一个指定时间段内(比如每天的8点到23点)的所有数据记录, 可以使用BETWEEN关键字结合日期函数来实现。 假设数据表名为your_table_na…