SpringBoot快速入门笔记(7)

文章目录

  • VueRouter前端路由
    • 1、简介
    • 2、RouterDemo
    • 3、子路由
    • 4、动态路由

VueRouter前端路由

1、简介

Vue的单页面应用是基于路由和组件的,不同组件的切换需要前端路由完成

vue-router3只能结合vue2,vue-router4只能结合vue3
安装 npm install vue-router@3

2、RouterDemo

新建vue2项目,模拟网易云网页版
这里是引用

新建3个组件,Discover发现、Friends关注、My我的音乐,组件里简单写个文字即可😮

这里是引用

<template><h1>关注</h1>
</template>

在App.vue中我们不再单独注册组件,而是使用路由,进行组件的映射

 <!-- 声明路由连接 --><router-link to="/discover">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">关注</router-link>
<!-- 声明路由占位标签 --><router-view></router-view>

光写连接但没有映射到组件,我们新建文件夹router–index.js

const router = new VueRouter({// 指定hash属性与组件的对应关系routes:[{path:'/discover', component:Discover},{path:'/friend',component:Friends},{path:'/my',component:My},]
})export default router	

main.js中导入index.js导出的router并且在Vue对象中添加

这里是引用

运行后,点击不同组件的链接,下方显示不同

这里是引用在这里插入图片描述

正常启动网易云网页时,主页面并不是空的,所以我们这里加入重定向,让主页面处在发现音乐这一组件 😉

这里是引用

3、子路由

Discover发现组件中再次使用路由(嵌套路由),这里要新建DailyRecLikeGues组件,继续在index.js中配置

<template><div><h1>发现音乐</h1><!-- 子路由链接 --><router-link to="/discover/dailyRec">每日推荐</router-link><router-link to="/discover/likeGues">猜你喜欢</router-link><router-view></router-view></div>
</template>

这里是引用
在这里插入图片描述

如果切换到“我的音乐”或者“关注”则不会显示下方两个组件

这里是引用

4、动态路由

如果有三个路由链接分别是商品123,这时候写三个组件就没有必要,可以实现组件的复用

My.vue组件中:

<template><div><h1>我的音乐</h1><router-link to="/my/1">商品1</router-link><router-link to="/my/2">商品2</router-link><router-link to="/my/3">商品3</router-link><hr><router-view></router-view></div>
</template>

这里是引用

在Product组件中可以动态获取id:

<template><h1>商品{{$route.params.id }}</h1>
</template>

这里是引用
在这里插入图片描述

发现选择不同商品时对应的id内容也不同,正常项目应该是根据id获得不同的数据再进行渲染🤓

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

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

相关文章

# Nacos 服务发现-Spring Cloud Alibaba 综合架构实战(四) -实现 service2 子模块。

Nacos 服务发现-Spring Cloud Alibaba 综合架构实战&#xff08;四&#xff09; -实现 service2 子模块。 1、在 service2 子模块下的 service-2-api 二级子工程中&#xff0c;定义服务接口 创建 ProviderService.java /*** C:\java-test\idea2019\nacos_discovery\nacos-mi…

设定延迟任务和定时任务并优化定时任务

一丶设定延时任务 1.设定延迟任务要求如下 ①在系统中建立easylee用户&#xff0c;设定其密码为easylee ②延迟任务由root用户建立 ③要求在5小时后备份系统中的用户信息文件到/backup中 ④确保延迟任务是使用非交互模式建立 ⑤确保系统中只有root用户和easylee用户可以执…

TypeScript之类

一、类的定义 二、对象的创建 class Person{id:number;name:string;age:number 18;constructor(id:number,name:string){this.id id;this.name name;}introduce():string{return hello,I am ${this.name},and I am ${this.age} years old.} }let person new Person(1,zhan…

普发Pfeiffer CCR263 CCR272 CMR261 CMR273 PBR260 IMR265 TPR265 使用说明手侧

普发Pfeiffer CCR263 CCR272 CMR261 CMR273 PBR260 IMR265 TPR265 使用说明手侧

SQL刷题---2021年11月每天新用户的次日留存率

解题思路&#xff1a; 1.首先算出每个新用户注册的日期,将其命名为表a select uid,min(date(in_time)) dt from tb_user_log group by uid2.计算出每个用户登录的天数,将其命名为表b select uid,date(in_time) dt from tb_user_log union select uid,date(out_time) dt fro…

Ubuntu22.04配置ROS2+PX4仿真环境

Ubuntu22.04配置ROS2PX4仿真环境 主要参考源&#xff1a; https://blog.csdn.net/weixin_44174421/article/details/135827130 https://blog.csdn.net/Zecet/article/details/130474620 一、准备工作 确保网络能够连接到github&#xff0c;出错主要源自于此&#xff1b;确保…

探索分布式系统监控zabbix------------自动发现与自动注册

目录 一、部署 zabbix 服务端 二、部署 zabbix 客户端 2.1环境准备 2.2服务端和客户端都配置时间同步 &#xff08;ntp&#xff09; 2.2.1服务端zbx-server 2.2.2服务端zabbix-agent01客户端 2.3客户端配置时区&#xff0c;与服务器保持一致 2.4设置 zabbix 的下载源&…

深度学习 Lecture 8 决策树

一、决策树模型&#xff08;Decision Tree Model) 椭圆形代表决策节点&#xff08;decison nodes)&#xff0c;矩形节点代表叶节点&#xff08;leaf nodes)&#xff0c;方向上的值代表属性的值&#xff0c; 构建决策树的学习过程&#xff1a; 第一步&#xff1a;决定在根节点…

allure2教程-1-环境搭建

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 自动化测试执行完成后我们需要展示给其他人看&#xff0c;这就要有自动化测试报告了。复杂的测试报告当然可以自己代码实现&#xff0c;但用pytest-html或allure基本也能满足我们生成测试报告的要求了。本小节介绍…

nacos 安装保姆级教程

安装nacos nacosVersion:2.2.3 需要的java版本较高&#xff0c; 所以这里直接安装jdk17&#xff1b; 安装链接见nacos 和jdk 官网&#xff0c;具体选择下面图片中的两个版本哈 本来想直接传到csdn的&#xff0c;结果这边的资料审核还是有点繁琐&#xff0c;然后上传的速度也有点…

oracle数据库怎么查看当前登录的用户?

方法如下&#xff1a; 输入select * from dba_users; 即可。 常用语句&#xff1a; 一&#xff0c;查看数据库里面所有用户&#xff1a; select * from dba_users; 前提是你是有dba权限的帐号&#xff0c;如sys,system。 二&#xff0c;查看你能管理的所有用户&#xff1…

每日一题 — 串联所有单词的子串

30. 串联所有单词的子串 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;因为words里面的每一个字符串的长度都是固定的&#xff0c;所以可以将题转换成字符在字符串中的所有异位词 设出哈希表定义left和right进窗口维护count判断出窗口维护count 代码&#xff1a; …