Vue2——单页应用程序路由的使用

一.单页应用程序与多页应用程序之间的比较

二.单页的应用场景

        系统类网站 / 内部网站 / 文档类网站 / 移动端网站

三.路由的介绍

        1. 什么是路由

                路由是一种映射关系

        2. Vue中的路由是什么

                路径和组件的映射关系

四.VueRouter的使用

        5个基础步骤(固定)

        1. 下载:下载VueRouter模块到当前工程,版本3.6.5

yarn/vue add vue-router@3.6.5 

        2. 引入

import VueRouter from 'vue-router'

       3. 安装注册

Vue.use(VueRouter)

        4. 创建路由对象

const router = new VueRouter()

        5. 注入,将路由对象注入到new Vue实例中,建立关联

new Vue({render: h => h(App),router
}).$mount('#app')
        2个核心步骤

        1. 创建需要的组件(views目录),配置路由规则

        2. 配置导航,配置路由出口(路径匹配的组件显示的位置)

五. 组件存放目录问题(组件分类)

分类开来 更易维护

·src / views文件夹

        ·页面组件 - 页面展示 - 配合路由用

·src / components文件夹

        ·复用组件 - 展示数据 - 常用于复用

六. 路由模块封装

·路由模块的封装抽离的好处是什么

        拆分模块,利于维护

以后如何快速引入组件

        基于@指代src目录,从src目录出发找组件

七. 使用router-link替代a标签实现高亮

vue-router提供了一个全局组件router-link(取代a标签)

1. 能跳转,配置to属性指定路径(必须)。本质还是a标签,to无需#

2. 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

·router-link-active模糊匹配(用的多)

        to='/my'可以匹配 /my /my/a /my/b ...

·router-link-exact-active精准匹配

        to='/my'仅可以匹配 /my

八. 自定义匹配类名

说明:router-link的两个高亮类名太长了,我们希望能定制

const router = new VueRouter({routes: [...],linkActiveClass: "类名1",linkExactActiveClass: "类名2"
})

九. 声明式导航 - 跳转传参

目标:在跳转路由时,进行传值

1. 查询参数传参

        1. 语法格式

                ·to='/path?参数名=值'

        2. 对应页面组件接收传递过来的值

                ·$router.query.参数名

目标:在跳转路由时,进行传值

2. 动态路由传参

        1. 配置动态路由

        

const router = new VueRouter({routes: [...,{path: '/search/:words',component: Search}]
})

        2. 配置导航链接

                ·to="/path/参数值"

        3. 对应页面组件接收传递过来的值

                ·$route.params.参数名

动态路由参数可选符

问题:配了路由path:"/search/:words"为什么按下面步骤操作,会未匹配到组件,显示空白

原因:/search/:words表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"

 

const router = new VueRouter({routes: [{path: '/', redirect: '/home'},{path: '/home', component: Home},{path: '/search/:words?', component: Search}]
})

编程式导航-基本跳转

两种语法:

1. path路径跳转(简易方便)

this.$router.push('路由路径')this.$router.push({path: '路由路径'
})

2. name命名路由跳转(适合path路径长的场景) 

this.$router.push({name: '路由名'
})
{name: '路由名', path: '/path/xxx', component: xxx},

编程式导航-路由传参

两种传参方式:查询参数+动态路由传参

1.1 path路径跳转传参(query传参)

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

1.2 path路径跳转传参(动态路由传参)

this.$router.push('/路径/参数值')
this.$router.push({path: '/路径/参数值'
})

 2.1 name命名路由跳转传参(query传参)

this.$router.push({name: '路由名字',query: {参数名2: '参数值1',参数名2: '参数值2'}
})

             

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

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

相关文章

Windows 下实验视频降噪算法 MeshFlow 详细教程

MeshFlow视频降噪算法 Meshflow 视频降噪算法来自于 2017 年电子科技大学一篇高质量论文。 该论文提出了一个新的运动模型MeshFlow,它是一个空间平滑的稀疏运动场 (spatially smooth sparse motion field),其运动矢量 (motion vectors) 仅在网格顶点 (m…

用Python脚本执行安卓打包任务

这个样例是基于windows系统写的python打包安卓的脚本: 一、配置AndroidStudio下的打包任务 1.在Android项目根目录下的build.gradle文件配置生成Release包的任务: task cleanAll(type: Delete) {delete rootProject.buildDirrootProject.subprojects.e…

专题十七_BFS_BFS解决 FloodFill 算法_BFS 解决最短路问题_多源 BFS_BFS 解决拓扑排序

目录 BFS 一、BFS解决 FloodFill 算法 1. 图像渲染(medium) 解析: 细节问题: 总结: 2. 岛屿数量(medium) 解析: DFS: BFS: 总结: 3. …

NVR小程序接入平台/设备EasyNVR多个NVR同时管理视频监控新选择

在数字化转型的浪潮中,视频监控作为安防领域的核心组成部分,正经历着前所未有的技术革新。随着技术的不断进步和应用场景的不断拓展,视频监控系统的兼容性、稳定性以及安全性成为了用户关注的焦点。NVR小程序接入平台/设备EasyNVR&#xff0c…

leetcode71:简化路径

给你一个字符串 path ,表示指向某一文件或目录的 Unix 风格 绝对路径 (以 / 开头),请你将其转化为 更加简洁的规范路径。 在 Unix 风格的文件系统中规则如下: 一个点 . 表示当前目录本身。此外,两个点 ..…

vscode 创建 vue 项目时,配置文件为什么收缩到一起展示了?

一、前言 今天用 vue 官方脚手架创建工程,然后通过 vscode 打开项目发现,配置文件都被收缩在一起了。就像下面这样 这有点反直觉,他们应该是在同一层级下的,怎么会这样,有点好奇,但是打开资源管理查看&…

大学适合学C语言还是Python?

在大学学习编程时,选择C语言还是Python,这主要取决于你的学习目标、专业需求以及个人兴趣。以下是对两种语言的详细比较,帮助你做出更明智的选择: C语言 优点: 底层编程:C语言是一种底层编程语言&#x…

yolov8涨点系列之优化器替换

文章目录 优化器替换的重要性加速收敛速度提高模型精度增强模型的泛化能力适应不同的数据集和任务特点 优化器替换步骤(1)准备代码:(2)导入优化器(3)替换优化器 本文将以替换Lion为优化器的方式展示如何对Ultrayluic的yolov8进行优化器替换。 优化器替换的重要性 加…

Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果 一、表头合并 参考&#xff1a; https://www.jianshu.com/p/2befeb356a31 二、单元格合并 1、示例代码 <template><div><el-…

C++ -- 模板进阶

非模板类型参数 模板参数分为类型形参与非类型形参。类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class 或 typename之类的参数类型名称。非类型形参&#xff1a;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中将该参数当成常量来使用。…

今日 AI 简报|零样本视频生成、移动端轻量语言模型、自动驾驶多模态模型等前沿 AI 技术集中亮相

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

如何监控员工上网行为?实现精准监控员工上网行为的5个妙招分享!(企业:稳了!)

如何监控员工上网行为&#xff1f; 员工上班时的"摸鱼"行为员工上网行为&#xff08;做与工作无关的活动&#xff0c;如浏览社交媒体、游戏、网购等&#xff09;&#xff0c;不仅影响工作效率&#xff0c;还可能破坏团队氛围&#xff0c;阻碍企业发展。 那么&#…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。 关键词 Canvas 组件复杂路径绘制渐变填充一、Canvas 的复杂路径绘制 Canvas 提供了…

Java 用户随机选择导入ZIP文件,解压内部word模板并入库,Windows/可视化Linux系统某麒麟国防系统...均可适配

1.效果 压缩包内部文件 2.依赖 <!--支持Zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>总之是要File类变MultipartFile类型的 好像是…

mint-ui Picker 显示异常

mint-ui Picker 显示异常 现象 最近一个老项目页面显示异常&#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象&#xff0c;而不是具体travelName 字段 组件 mint-ui Picker 使用方式(vue方式) // template <mt-picker :slots"slots" value-key…

【重生之我要苦学C语言】深入理解指针2

深入理解指针2 const修饰指针 当const修饰变量时&#xff0c;是无法更该该变量的值的 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {const int a 10;//const常属性&#xff0c;不能改变的属性a 1;printf("%d\n", a);return 0; }报错&…

半参数模型

4. 半参数模型 (Semi-parametric Model) 半参数模型结合了参数化和非参数化的方法。可以在整体上采用线性回归&#xff0c;但在局部允许非线性变化。这样做的目的是在保持模型的线性解释性的同时&#xff0c;捕捉细微的弧度趋势。 例如&#xff0c;可以定义&#xff1a; y …

LInux系统编程(二)操作系统和进程

目录 一、前言&#xff1a;冯诺依曼体系结构 1、图中各个单元的介绍 2、值得注意的几点 二、操作系统 1、操作系统分层图 2、小总结 三、 进程&#xff08;重点&#xff09; 1、进程的基本概念 2、存放进程信息的数据结构——PCB&#xff08;Linux 下称作 task_struct…