当前位置：首页 > news >正文

【VUE】六路由和传值

news 2026/2/8 0:17:40

一、路由和传值

二、案例

三、案例存在无法刷新问题

一、路由和传值

当某个组件可以根据某些参数值的不同，展示不同效果时，需要用到动态路由。

例如：访问网站看到课程列表，点击某个课程，就可以跳转到课程详细页面（根据课程ID不同展示不同数据）。

如何来设置动态路由呢？

定义路由（可以使用别名定义路由、可以实现动态值）

const router = new VueRouter({routes: [{ path: '/', component: Home},{ path: '/course', component: Course, name: "Course"}{ path: '/detail/:id', component: Detail, name: "Detail"}],
})

HTML展示：（前三个就写死了）

<div><router-link to="/">首页</router-link><router-link to="/course">课程</router-link><router-link to="/detail/123">课程</router-link><router-link :to="{path:'/course'}">课程</router-link><router-link :to="{path:'/course?size=19&page=2'}">课程</router-link><router-link :to="{path:'/course', query:{size:19,page:2}">课程</router-link><router-link :to="{name:'Course'}">课程</router-link><router-link :to="{name:'Course', query:{size:19,page:2} }">课程</router-link><router-link :to="{path:'/detail/22',query:{size:123}}">Linux</router-link><router-link :to="{name:'Detail',params:{id:3}, query:{size:29}}">网络安全</router-link>
</div><h1>内容区域</h1>
<router-view></router-view>

组件获取URL传值和GET参数

 const Detail = {data: function () {return {title: "详细页面",paramDict: null,queryDict: null,}},created: function () {this.paramDict = this.$route.params;this.queryDict = this.$route.query;// 发送axios请求},template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`}

二、案例

结合上面的路由实现案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.container {width: 1100px;margin: 0 auto;}.menu {height: 48px;background-color: #499ef3;line-height: 48px;}.menu a {color: white;text-decoration: none;padding: 0 10px;}.course-list {display: flex;flex-wrap: wrap;justify-content: flex-start;}.course-list .item {width: 248px;padding: 10px;border: 1px solid #dddddd;margin-right: 5px;margin-top: 10px;}.course-list .item img {width: 100%;height: 120px;}</style><script src="./js/vue.min.js"></script><script src="./js/vue-router.js"></script><script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app"><div class="menu"><div class="container"><router-link to="/">申请入会</router-link><router-link to="/home">首页</router-link><router-link to="/course">写真</router-link><router-link to="/news">资讯</router-link></div></div><div class="container"><router-view></router-view></div></div><script>const Home = {data: function () {return {title: "欢迎进入交友平台"}},template: `<h2>{{title}}</h2>`}const Course = {data: function () {return {courseList: []}},created: function () {/* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】- 可以去操作组件对象，例如：this.courseList = [11,22,33]- 不可以去操作DOM，例如：document.getElementById （未创建）*/axios({method: "get",url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',headers: {"Content-Type": "application/json"}}).then((res) => {this.courseList = res.data.data.result;})},mounted: function () {/* DOM对象已在页面上生成，此时就可以 */},template: `<div class="course-list"><div class="item" v-for="item in courseList"><router-link :to="{name:'Detail',params:{id:item.id}}"><img :src="item.cover" alt=""><a>{{item.name}}</a></router-link></div></div>`}const News = {data: function () {return {dataList: []}},created: function () {/* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】- 可以去操作组件对象，例如：this.courseList = [11,22,33]- 不可以去操作DOM，例如：document.getElementById （未创建）*/axios({method: "get",url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',headers: {"Content-Type": "application/json"}}).then((res) => {this.dataList = res.data.data.result;})},template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`}const Detail = {data: function () {return {title: "详细页面",courseId: null}},created: function () {this.courseId = this.$route.params.id;// 此处可以根据课程ID，发送ajax请求获取课程详细信息},template: `<div><h2>课程详细页面</h2><div>当前课程ID为：{{courseId}}</div></div>`}const router = new VueRouter({routes: [{path: '/', component: Home},{path: '/home', component: Home},{path: '/course', component: Course},{path: '/news', component: News},{path: '/detail/:id', component: Detail, name: 'Detail'}],//mode: 'history'})var app = new Vue({el: '#app',data: {},methods: {},router: router})
</script>
</body>
</html>

三、案例存在无法刷新问题

上述编写案例是没有问题，但如果在开发中会涉及到同一个路由的跳转（默认不会重新加载页面，数据无法获取）。

例如：在详细页面再出现一个课程推荐，即：在课程详细，点击推荐的课程后跳转到课程详细页面（课程ID不同），此时课程的ID还是原来加载的ID，无法获取推荐课程的ID。

如何解决呢？

在课程详细的组件中设置watch属性即可，watch会监测$route 值，一旦发生变化，就执行相应的函数。

const Detail = {data: function () {return {title: "详细页面",courseId: null,}},created: function () {this.courseId = this.$route.params.id;this.getCourseDetail();},watch: {$route:function(to, from) {this.courseId = to.params.id;// this.getCourseDetail();}},methods: {getCourseDetail: function () {// 根据this.courseId获取课程详细信息}},template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}.container {width: 1100px;margin: 0 auto;}.menu {height: 48px;background-color: #499ef3;line-height: 48px;}.menu a {color: white;text-decoration: none;padding: 0 10px;}.course-list {display: flex;flex-wrap: wrap;justify-content: flex-start;}.course-list .item {width: 248px;padding: 10px;border: 1px solid #dddddd;margin-right: 5px;margin-top: 10px;}.course-list .item img {width: 100%;height: 120px;}</style><script src="./js/vue.min.js"></script><script src="./js/vue-router.js"></script><script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app"><div class="menu"><div class="container"><router-link to="/">路飞学城</router-link><router-link to="/home">首页</router-link><router-link to="/course">课程</router-link><router-link to="/news">资讯</router-link></div></div><div class="container"><router-view></router-view></div></div><script>const Home = {data: function () {return {title: "欢迎使用路飞学城"}},template: `<h2>{{title}}</h2>`}const Course = {data: function () {return {courseList: []}},created: function () {/* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】- 可以去操作组件对象，例如：this.courseList = [11,22,33]- 不可以去操作DOM，例如：document.getElementById （未创建）*/axios({method: "get",url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',headers: {"Content-Type": "application/json"}}).then((res) => {this.courseList = res.data.data.result;})},mounted: function () {/* DOM对象已在页面上生成，此时就可以 */},template: `<div class="course-list"><div class="item" v-for="item in courseList"><router-link :to="{name:'Detail',params:{id:item.id}}"><img :src="item.cover" alt=""><a>{{item.name}}</a></router-link></div></div>`}const News = {data: function () {return {dataList: []}},created: function () {/* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】- 可以去操作组件对象，例如：this.courseList = [11,22,33]- 不可以去操作DOM，例如：document.getElementById （未创建）*/axios({method: "get",url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',headers: {"Content-Type": "application/json"}}).then((res) => {this.dataList = res.data.data.result;})},template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`}const Detail = {data: function () {return {title: "详细页面",courseId: null,hotCourseList: [{id: 1000, title: "python全栈开发"},{id: 2000, title: "异步编程"},],}},created: function () {this.courseId = this.$route.params.id;// 此处可以根据课程ID，发送ajax请求获取课程详细信息this.getCourseDetail();},watch: {$route: function (to, from) {this.courseId = to.params.id;this.getCourseDetail();}},methods: {getCourseDetail: function () {// 根据this.courseId获取课程详细信息}},template: `<div><h2>课程详细页面</h2><div>当前课程ID为：{{courseId}}</div><h3>课程推荐</h3><ul><li v-for="item in hotCourseList"><router-link :to="{name:'Detail', params:{id:item.id}}">{{item.title}}</router-link></li></ul></div>`}const router = new VueRouter({routes: [{path: '/', component: Home},{path: '/home', component: Home},{path: '/course', component: Course},{path: '/news', component: News},{path: '/detail:id', component: Detail, name: 'Detail'}],//mode: 'history'})var app = new Vue({el: '#app',data: {},methods: {},router: router})
</script>
</body>
</html>

【VUE】六路由和传值

目录一、路由和传值二、案例三、案例存在无法刷新问题一、路由和传值当某个组件可以根据某些参数值的不同，展示不同效果时，需要用到动态路由。例如：访问网站看到课程列表，点击某个课程，就可以跳转到课程详…...

编程日记 2023/3/21 11:05:34

ChatGPT修炼指南和它的电力畅想

近期，ChatGPT刷屏各大社交平台，无疑成为人工智能界最靓的仔！ 身为一款“会说话”的聊天机器人程序，它与前辈产品Siri、小度、微软小冰等有什么不同？先来听听小伙伴们怎么说。 ChatGPT何以修炼得这么强大？…...

编程日记 2023/3/31 23:56:11

基于vscode开发vue项目的详细步骤教程

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客目录五、vscode集成npm开发vue项目 1、vscode安装所需要的插件： 2、搭建一个vue小页面(入门vue) 3、大致理解…...

编程日记 2023/2/28 22:22:44

【C++初阶】1. C++入门

1. 前言 1. 什么是C C语言是结构化和模块化的语言，适合处理较小规模的程序。对于复杂的问题，规模较大的程序，需要高度的抽象和建模时，C语言则不合适。为了解决软件危机， 20世纪80年代， 计算机界提出了OOP(…...

编程日记 2023/4/2 2:17:29

数据结构与算法（二十）快速排序、堆排序(四)

数据结构与算法（三）软件设计(十九)https://blog.csdn.net/ke1ying/article/details/129252205 排序分为稳定排序和不稳定排序内排序和外排序内排序指在内存里，外排序指在外部存储空间排序 1、排序的方法分类。插入排序&#xff…...

编程日记 2023/4/3 2:52:30

TensorRT量化工具pytorch_quantization代码解析(二）

有些地方看的不是透彻，后续继续补充！ 继续看张量量化函数，代码位于：tools\pytorch-quantization\pytorch_quantization\tensor_quant.py ScaledQuantDescriptor 量化的支持描述符:描述张量应该如何量化。QuantDescriptor和张量…...

编程日记 2023/2/28 22:17:57

题目描述 ： from Crypto.Util.number import getPrime,bytes_to_long from sympy import Derivative from fractions import Fraction from secret import flagpgetPrime(1024) qgetPrime(1024) e65537 np*q zFraction(1,Derivative(arctan(p),p))-Fraction(1,Deri…...

编程日记 2023/2/28 22:16:30

taobao.user.openuid.getbyorder( 根据订单获取买家openuid )

￥免费不需用户授权根据订单获取买家openuid，最大查询30个公共参数请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 请求示例 TaobaoClient client new DefaultTaobaoClient(url, appkey, secret); UserOpenuidGetbyorderR…...

编程日记 2023/2/28 22:15:19

Mac iTerm2 rz sz

1、安装brew（找了很多🔗，就这个博主的好用） Mac如何安装brew？_行走的码农00的博客-CSDN博客_mac brew 2、安装lrzsz brew install lrzsz 检查是否安装成功 brew list 定位lrzsz的安装目录 brew list lrzsz 执…...

编程日记 2023/4/2 14:38:36

高通平台开发系列讲解（Sensor篇）Gsensor基础知识

文章目录一、什么是SENSOR?二、Sensor的分类及作用三、Gsensor的工作原理及介绍3.1、常见Gsensor3.2、Gsensor的特性沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇文章将介绍 Sensor 基础一、什么是SENSOR? 传感器（英文名称：sensor ）是一种检测装置，能感…...

编程日记 2023/2/28 22:12:53

图像处理实战--Opencv实现人像迁移

前言： Hello大家好，我是Dream。今天来学习一下如何使用Opencv实现人像迁移，欢迎大家一起参与探讨交流~ 本文目录：一、实验要求二、实验环境三、实验原理及操作1.照片准备2.图像增强3.实现美颜功能4.背景虚化5.图像二值化处理6.人…...

编程日记 2023/2/28 22:11:46

OnlyOffice验证（二）在Centos7上部署OnlyOffice编译结果

在Centos7上部署OnlyOffice编译结果此处将尝试将OnlyOffice验证（一）DocumentServer编译验证的结果部署到Centos7上。并且使用其它服务器现有的RabbitMq和Mysql。安装Nginx 先安装Nginx需要的依赖环境： yum install openssl* -y yum insta…...

编程日记 2023/3/22 13:32:42

6.补充和总结【Java面试第三季】

6.补充和总结【Java面试第三季】前言推荐6.补充和总结69_总结闲聊回顾和总结继续学习最后前言 2023-2-4 19:08:01 以下内容源自【尚硅谷Java大厂面试题第3季，跳槽必刷题目必扫技术盲点（周阳主讲）-哔哩哔哩】仅供学习交流使用推荐 Jav…...

编程日记 2023/3/21 22:05:07

基于ssm框架大学生社团管理系统(源码+数据库+文档)

一、项目简介本项目是一套基于ssm框架大学生社团管理系统，主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。包含：项目源码、数据库脚本等，该项目可以直接作为bishe使用。项目都经过严格调试，确保可…...

编程日记 2023/4/1 13:34:05

vulnhub靶场NAPPING: 1.0.1教程

靶场搭建靶机下载地址：Napping: 1.0.1 ~ VulnHub直接解压双击ova文件即可使用软件：靶机VirtualBox，攻击机VMware攻击机：kali信息收集arp-scan -l上帝之眼直接来看看网站可以注册账号，那就先试试。注册完后登入哦。要输…...

编程日记 2023/3/21 22:56:44

Docker基本介绍

最近需要将项目做成一个web应用并部署到多台服务器上，于是就简单学习了一下docker，做一下小小的记录。 1、简单介绍一下docker 我们经常遇到这样一个问题，自己写的代码在自己的电脑上运行的很流畅，在其他人电脑上就各种bug&…...

编程日记 2023/2/28 22:06:00

可用于标记蛋白质216699-36-4，6-ROX，SE，6-羧基-X-罗丹明琥珀酰亚胺酯

一.6-ROX，SE产品描述：6-羧基-X-罗丹明琥珀酰亚胺酯（6-ROX，SE）是一种用于寡核苷酸标记和自动DNA测序的荧光染料，可用于标记蛋白质，寡核苷酸和其他含胺分子的伯胺（-NH2）。西…...

编程日记 2023/4/2 14:39:03

高数：极限的定义

目录极限的定义： 数列极限的几何意义： 由极限的定义得出的极限的两个结论： 编辑极限的第三个结论： 例题方法1： 编辑方法2： 编辑方法3： 编辑极限的定义： 如何理…...

编程日记 2023/3/31 23:58:58

大数据技术之Hadoop

第1章 Hadoop概述1.1 Hadoop是什么1.2 Hadoop发展历史（了解）1.3 Hadoop三大发行版本（了解）Hadoop三大发行版本：Apache、Cloudera、Hortonworks。Apache版本最原始（最基础）的版本，对于…...

编程日记 2023/2/28 22:02:07

一文带你搞懂Go语言函数选项模式，Go函数一等公民。

前言通过这篇文章《为什么说Go的函数是”一等公民“》，我们了解到了什么是“一等公民”，以及都具备哪些特性，同时对函数的基本使用也更加深入。本文重点介绍下Go设计模式之函数选项模式，它得益于Go的函数是“一等公民”&#…...

编程日记 2023/2/28 22:00:58

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2026/1/25 14:43:07

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

2021-03-15 iview一些问题

1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2026/2/4 16:21:14

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

如何更改默认 Crontab 编辑器？

在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来，一直在光谱成像领域深度钻研和发展，始终致力于研发高性能、高可靠性的光谱成像相机，为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/12/31 17:08:10

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构：由肠系膜上静脉和脾静脉汇合构成，是肝脏血液供应的主要来源。淤血后果：门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血，引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

编程新知 2026/2/2 5:12:38

【VUE】六路由和传值

一、路由和传值

二、案例

三、案例存在无法刷新问题

相关文章：

【VUE】六路由和传值

ChatGPT修炼指南和它的电力畅想

基于vscode开发vue项目的详细步骤教程

【C++初阶】1. C++入门

数据结构与算法（二十）快速排序、堆排序(四)

TensorRT量化工具pytorch_quantization代码解析(二）

buu [BJDCTF2020]easyrsa 1

taobao.user.openuid.getbyorder( 根据订单获取买家openuid )

Mac iTerm2 rz sz

高通平台开发系列讲解（Sensor篇）Gsensor基础知识

图像处理实战--Opencv实现人像迁移

OnlyOffice验证（二）在Centos7上部署OnlyOffice编译结果

6.补充和总结【Java面试第三季】

基于ssm框架大学生社团管理系统(源码+数据库+文档)

vulnhub靶场NAPPING: 1.0.1教程

Docker基本介绍

可用于标记蛋白质216699-36-4，6-ROX，SE，6-羧基-X-罗丹明琥珀酰亚胺酯

高数：极限的定义

大数据技术之Hadoop

一文带你搞懂Go语言函数选项模式，Go函数一等公民。

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

大数据零基础学习day1之环境准备和大数据初步理解

2024年赣州旅游投资集团社会招聘笔试真

2021-03-15 iview一些问题

Map相关知识

Xen Server服务器释放磁盘空间

【分享】推荐一些办公小工具

如何更改默认 Crontab 编辑器？

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

门静脉高压——表现

一、 路由和传值

二、案例

三、案例存在无法刷新问题

相关文章：

一、路由和传值