Vue-14-前端框架Vue之应用基础嵌套路由和路由传参

文章目录

  • 1 嵌套路由
    • 1.1 News.vue
    • 1.2 Detail.vue
    • 1.3 router/index.ts
  • 2 路由传参
    • 2.1 query参数
      • 2.1.1 News.vue(传递参数)
      • 2.1.2 Detail.vue(接收参数)
    • 2.2 params参数
      • 2.2.1 router/index.ts(需要提前占位)
      • 2.2.2 News.vue(传递参数)
      • 2.2.3 Detail.vue(接收参数)
    • 2.3 props配置
      • 2.3.1 router/index.ts
      • 2.3.2 Detail.vue(接收参数)

三种方式进行路由传参:query参数、params参数、props配置。

1 嵌套路由

(1)点击新闻,跳转到新闻页。
(2)点击每一个新闻,查看具体的新闻详情。

1.1 News.vue

<template><div class="news"><!-- 导航区 --><ul>

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

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

相关文章

Python网安-ftp服务暴力破解(仅供学习)

目录 源码在这里 需要导入的模块 连接ftp&#xff0c;并设置密码本和线程 核心代码 设置线程 源码在这里 https://github.com/Wist-fully/Attack/tree/cracker 需要导入的模块 import ftplib from threading import Thread import queue 连接ftp&#xff0c;并设置密码…

ES6数组的`flat()`和`flatMap()`函数用法

今天给大家分享ES6中两个超实用的数组函数&#xff1a;flat()和flatMap()&#xff0c;学会它们能让数组处理变得更轻松&#xff01; 1. flat()函数 1.1 基本介绍 flat()用于将嵌套数组"拍平"&#xff0c;即将多维数组转换为一维数组。 1.2 语法 const newArray …

upload-labs靶场通关详解:第15-16关

第十五关 getimagesize函数验证 一、分析源代码 function isImage($filename){$types .jpeg|.png|.gif;if(file_exists($filename)){$info getimagesize($filename);$ext image_type_to_extension($info[2]);if(stripos($types,$ext)>0){return $ext;}else{return false…

【Linux】基础IO流

好的代码自己会说话&#xff0c;清晰的逻辑与优雅的结构&#xff0c;是程序员与世界对话的方式。 前言 这是我自己学习Linux系统编程的第五篇笔记。后期我会继续把Linux系统编程笔记开源至博客上。 上一期笔记是关于进程&#xff1a; 【Linux】进程-CSDN博客https://blog.csdn…

【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(二)

&#x1f525;个人主页&#xff1a;艾莉丝努力练剑 ❄专栏传送门&#xff1a;《C语言》、《数据结构与算法》、C语言刷题12天IO强训、LeetCode代码强化刷题 &#x1f349;学习方向&#xff1a;C/C方向 ⭐️人生格言&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为…

AD8021ARZ-REEL7【ADI】300MHz低噪声运放放大器,高频信号处理的性价比之选!

AD8021ARZ-REEL7&#xff08;ADI&#xff09;产品解析与推广文案 1. 产品概述 AD8021ARZ-REEL7 是 Analog Devices Inc.&#xff08;ADI&#xff09; 推出的一款 高速、低噪声运算放大器&#xff08;Op-Amp&#xff09;&#xff0c;属于 ADI的高性能放大器系列&#xff0c;专为…

WPF学习笔记(11)数据模板DataTemplate与数据模板选择器DataTemplateSelector

数据模板DataTemplate与数据模板选择器DataTemplateSelector 一、DataTemplate1. DataTemplate概述2. DataTemplate详解 二、DataTemplateSelector1. DataTemplateSelector概述2. DataTemplateSelector详解 总结 一、DataTemplate 1. DataTemplate概述 DataTemplate 表示数据…

【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”

系列回顾&#xff1a; 在上一篇 《AI的“火眼金睛”&#xff1a;用OpenCV和SHAP洞察“第一眼缘”》 中&#xff0c;我们成功地让AI拥有了视觉&#xff0c;它已经能像一个严苛的“质检员”一样&#xff0c;评判我视频的画质和动态感。 但我的焦虑并没有完全消除。因为我发现&a…

(5)pytest-yield操作

1. 简介 上一篇中&#xff0c;我们刚刚实现了在每个用例之前执行初始化操作&#xff0c;那么用例执行完之后如需要清除数据&#xff08;或还原&#xff09;操作&#xff0c;可以使用 yield 来实现。fixture通过scope参数控制setup级别&#xff0c;既然有setup作为用例之前前的操…

C++中的cmath库

在C编程中&#xff0c;数值计算是科学计算、工程应用及算法开发的基础。cmath库作为C标准库的重要组成部分&#xff0c;提供了丰富的数学函数和工具&#xff0c;能够高效处理各种数值计算任务。本文将全面解析cmath库的核心功能&#xff0c;并通过实战案例展示其强大威力。 一…

python包管理工具uv VS pip

在 Python 中&#xff0c;uv 和 pip 都是包管理工具&#xff0c;但它们的定位和特性有所不同。以下是主要区别&#xff1a; 1. pip&#xff08;传统工具&#xff09; 定位&#xff1a;Python 官方的包安装工具&#xff0c;是 Python 生态中最基础的包管理器。特点&#xff1a;…

OpenCv基础(C++)

1.图像读取与显示 #include<opencv2/opencv.hpp> using namespace cv;Mat src imread("C:/Users/16385/Desktop/new/photo/1.jpg");//读取图像 Mat src imread("C:/Users/16385/Desktop/new/photo/1.jpg",IMREAD_GRAYSCALE); //将读取的图像转为灰…

MySQL非阻塞创建索引的方法

文章目录 1. Online DDL (MySQL 5.6)2. pt-online-schema-change 工具3. gh-ost 工具4. 对于MySQL 8.0注意事项 在MySQL中创建大型表索引时&#xff0c;传统方式会阻塞表的写操作&#xff0c;影响生产环境使用。以下是几种非阻塞创建索引的方法&#xff1a; 1. Online DDL (My…

数字雨动画背景

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>数字雨动画背景</title><style>* {m…

分布式锁的概念与应用场景

一、分布式锁的核心概念 分布式锁是一种在分布式系统环境下&#xff0c;用于保证多个进程/节点对共享资源实现互斥访问的机制。其本质是通过某种中间件&#xff08;如Redis、ZooKeeper等&#xff09;实现跨节点的锁控制&#xff0c;确保在分布式环境中&#xff0c;同一时刻只有…

js代码09

题目 好的&#xff0c;我们继续。 在上一个练习中&#xff0c;我们深入探讨了 this 的复杂性。你会发现&#xff0c;ES6 引入的 class 语法在很大程度上就是为了简化 this 的使用&#xff0c;并为 JavaScript 提供一个更清晰、更熟悉的面向对象编程&#xff08;OOP&#xff0…

基于Airtest的App数据爬取实战:突破传统爬虫的边界

引言:App数据爬取的技术困境 在当今移动优先的时代,App已成为企业核心数据载体,然而​​传统爬虫技术​​在App数据获取上面临三大难题: ​​协议层屏障​​:加密HTTPS、SSL Pinning等技术阻断中间人攻击​​渲染层障碍​​:React Native、Flutter等跨平台框架使DOM解析…

【LeetCode 热题 100】560. 和为 K 的子数组——(解法一)前缀和+暴力

Problem: 560. 和为 K 的子数组 题目&#xff1a;给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。子数组是数组中元素的连续非空序列。 【LeetCode 热题 100】560. 和为 K 的子数组——&#xff08;解法二&#xff09;前缀和…

android车载开发之HVAC

目前主要在做车载hvac的开发&#xff0c;主要的一些功能主要是hvac&#xff0c;座椅&#xff0c;香氛&#xff0c;设置等的一些模块&#xff0c;具体模块下&#xff0c;比如 1.空调 ac&#xff0c;智能模式&#xff08;极速降温&#xff0c;极速采暖&#xff0c;智能除味&…

深度学习 Diffusers 库(自留)

&#xff08;本文将围绕 安装Diffusers库及其依赖、理解Diffusers核心概念&#xff1a;Pipeline, Model, Scheduler 、使用预训练模型进行推理&#xff08;文生图、图生图等&#xff09; 、 自定义模型和调度器 、训练自己的扩散模型&#xff08;可选&#xff0c;需要大量资源&…