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

news2024/11/5 7:22:50

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

二.单页的应用场景

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

三.路由的介绍

        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.coloradmin.cn/o/2230767.html

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

相关文章

苹果ipa上架apple store 遇到的问题汇总已经解决方案!

大家伙,我是小黄。 最近在将ipa上架到apple store的时候遇到了一些问题,经过很长时间的摸索和修改终于成功上架了,下面是我遇到的问题和解决过程,希望可以帮助到大家。 一: Guideline 1.3 - Safety - Kids Category …

数据库三范式(1NF、2NF、3NF)

1NF(第一范式) 定义:确保每一列都是原子值,即是不可分割的基础数据项。 所谓第一范式(1NF)是指在关系模型中,对于添加列的一个规范要求,所有的列都 应该是原子性的,即数…

亚马逊CEO安迪·贾西(Andy Jassy)近日透露,Alexa助手即将迎来一次重大升级,具备“代理性”功能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

ts:函数的重载

ts:函数的重载 1 主要内容说明2 例子2.1 函数的重载2.1.1 源码1 (函数的重载)2.1.2 源码1运行效果 3.结语4.定位日期 1 主要内容说明 重载函数可以提高类型安全性,内容灵活性和可读性。重载允许同一个函数定义多个参数类型的数量…

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件,它提供了一个标签页式的界面,允许用户在不同的页面(或称为标签)之间切换。每个页面都可以包含不同的内容,如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…

telnet 密码模式 访问路由器

telnet 密码访问华为路由器 模拟被访问路由 sy [Huawei]int g0/0/0 //选中 g0/0/0端口 [Huawei-GigabitEthernet0/0/0]ip add 192.168.1.1 24 //设置端口ip [Huawei]user-interface vty 0 4 //配置vty [Huawei-ui-vty0-4]set authentication password cipher huawei123 //设置…

项目模块1~12总结:服务器大模块梳理

一、思维导图 二、设计思路 1、各种回调函数梳理 服务器里面包含了监听套接字和监听到的通信套接字(新连接),我们要对这两种套接字进行设置回调函数,其中监听套接字里面只要设置读回调,通信套接字要设置5种回调&…

UE4安卓Gradle工程中的libUE4.so的生成原理

流程图 流程图放在最前面,下面是讲解。 libUE4.so 问:在UE4安卓开发中,libUE4.so即是符号表,又是引擎代码native,是吗? 答:是的,libUE4.so在UE4安卓开发中既包含符号表,…

Linux下Nginx的安装与使用

Linux下Nginx的安装与使用 博客: www.lstar.icu 开源地址 Gitee 地址: https://gitee.com/lxwise/iris-blog_parent Github 地址: https://github.com/lxwise/iris-blog_parent 序言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子…

STM32 HAL库 SPI驱动1.3寸 OLED屏幕

目录 参考硬件引脚与接线 点亮屏幕CubeMX 配置OLED 驱动程序代码 参考 基于STM32F103C8T6最小系统板HAL库CubeMX SPI驱动7针 OLED显示屏(0.96寸 1.3寸通用)0.96 oled HAL库驱动 SPI STM32SPI驱动0.96/1.3寸 OLED屏幕,易修改为DMA控制STM32驱…

江协科技STM32学习- P26 UART串口外设

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

基于Abaqus的高纯铝不同应变率下单晶塑性变形的取向依赖性研究

文章题目:《Strain rate effect of high purity aluminum single crystals: Experiments and simulations》 文章doi:10.1016/j.ijplas.2014.10.002 推荐理由:作者研究了高纯铝不同应变率下单晶塑性变形的取向依赖性,不同应变率…

虚拟现实与增强现实:重塑娱乐和教育的边界!

内容概要 在这个瞬息万变的时代,虚拟现实(VR)和增强现实(AR)正如两位魔法师,腾云驾雾间掀起了一场教育与娱乐的革命。虚拟现实带我们飞跃平凡,进入一个充满奇迹的数字宇宙,仿佛我们…

【论文分享】利用机器学习和计算机视觉技术增强城市街道峡谷中的PM2.5实时监测

本文以兰州市为研究区域使用计算机视觉技术从交通摄像头拍摄的交通图像中提取实时交通流量和街景特征,以预测PM2.5浓度,并解释道路环境变化对PM2.5水平的影响。 【论文题目】 Enhancing urban real-time PM2.5 monitoring in street canyons by machine…

《双指针篇》---复写零(标的简单,实际比较复杂)

题目传送门 方法一:双指针 我们发现不能从前向后复写,因为会覆盖掉还没有被复写的数据 因此我们需要从后往前复写。 此时left应该指向最后一个被复写的数。 right指向数组最后一个元素 1.找到最后一个被复写的数据。我们用left指向 ①先判断left的位置0/…

Docker(二):Docker的基本使用

1 Docker的基本使用 1.1 镜像相关操作 1、从DockerHub搜索镜像 [rootmaster ~]# docker search centos # 镜像名字 描述 星标 是否官方(有OK表示为官方镜像) NAME …

SQL Server 可观测最佳实践

SQL Server 简介 SQL Server 是微软公司开发的一款关系数据库管理系统,支持企业 IT 环境中的各种事务处理、商业智能和分析应用程序。它支持多种操作系统平台,而无论是物理还是虚拟形式,自建部署环境还是在云环境中,运行的操作系…

PyEcharts | 认识图形--饼图和玫瑰图

饼图和玫瑰图 饼图玫瑰图rosetype 参数 饼图 from pyecharts.charts import Pie import pyecharts.options as optsfrom pyecharts.globals import CurrentConfig,NotebookType CurrentConfig.NOTEBOOK_TYPE NotebookType.JUPYTER_LAB CurrentConfig.ONLINE_HOST OnlineHos…

ros与mqtt相互转换

vda5050 VDA5050协议介绍 和 详细翻译-CSDN博客 ros与mqtt相互转换 如何转换的,通过某个中转包,获取ros的消息然后以需要的格式转换为mqtt 需要的参数 ros相关 parameters[ (ros_subscriber_type, vda5050_msgs/NodeState), (ros_subscriber_queue…

这几款AI搜索产品,你用过几个?

AI搜索产品逐步走进普通大众的视野,当然也会有更多的产品进入市场供大家选择。 以下是一些常见的 AI 搜索产品: 综合型 AI 搜索平台: Perplexity:海外较受欢迎的 AI 搜索引擎,拥有百万用户。它利用 GPT、Claude、Llam…