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

vue路由的基本使用

vue路由的基本使用

  • vue-router简介
  • 一、路由配置和使用
    • 1、安装
    • 2、创建路由实例
    • 2、在组件中引用路由 router-view ,如APP根组件中直接引用:
    • 3、最后还需要把路由挂载到APP实例中,在==main.js==中注册路由:
  • 二、路由重定向与别名
  • 三、声明式导航
    • 1、传统的导航
    • 2、通过路由router-link
  • 四、嵌套路由
  • 四、命名路由
  • 五、取消路由组件在前进后退
  • 命名路由
  • 二、嵌套(多级)路由
    • 二级目录
      • 三级目录

vue-router简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

一、路由配置和使用

1、安装

打开项目终端,通过npm安装

npm install vue-router@4

2、创建路由实例

在项目中src目录想创建Router文件夹,新建index.js文件,在这个文件下配置路由:

import { createWebHashHistory, createRouter } from 'vue-router'import Center from '../view/Center.vue' //引入组件路径(路由组件尽量放在view文件夹下)
import Home from '../view/Home.vue'const routes = [{ path: '/Center', //跳转的路径name:'Center ' //命名路由,也可以不写component: Center //跳转到对应的组件
},{ path: '/Home', component: Home
},
]const router = createRouter({history: createWebHashHistory(),//hash的模式,如#/home,#/center  带#号的路径routes,//`routes:routes`的缩写
})export default router

2、在组件中引用路由 router-view ,如APP根组件中直接引用:

<template>app<!--插槽--><router-view></router-view></template>

3、最后还需要把路由挂载到APP实例中,在main.js中注册路由:


import { createApp } from 'vue'
import App from './App.vue'
import router from './Router' //直接导入Router文件夹,会自动找到index.js这个文件const app=createApp(App)app.use(router) //注册路由插件
app.mount('#app')

直接输入对应的路径,显示对应的组件,到此路由的基本模型已经做好了

在这里插入图片描述

二、路由重定向与别名

  • 重定向也是通过 routes 配置redirect来完成,下面例子是从 /home 重定向到 /:
const routes = [{ path: '/home', redirect: '/' }
]
  • 重定向的目标也可以是一个命名的路由:(路由通过name来命名)
const routes = [{ path: '/home', redirect: { name: 'center' } }]
  • 常规参数只匹配url片段之间的字符,用 / 分割。如果我们想匹配任意路径,我们可以自定义的路径参数正则表达式,在路径参数后面的括号中加入 正则表达式:
const routes = [{ path: '/:pathMatch(.*)*', //pathMatch只是占位符,任意字母都可以name:'NotFound',component: NotFound},
]
  • 别名alias属性表示,当url匹配到别名/abc,也会跳转到组件center中去
const routes = [{ path: '/Center', component: Center ,alias:'/abc'  //注意别名有个/;也可以用数组alias: ['/abc', 'aaa']},
]

三、声明式导航

1、传统的导航

通过a标签跳转

<div class="tabbar"><ul><li><a href="#/home">首页</a></li><li><a href="#/films">影院</a></li><li><a href="#/center">我的</a></li></ul></div>

2、通过路由router-link

  • to跳转到对应的路由,不需要加#号
  • 不过标签会带a标签的样式,底部会有个下划线不太好看,后面我们也可以通过$route.push跳转的方法
 <ul><li><router-link to="/home">首页</router-link> </li><li><router-link to="/films">影院</router-link> </li><li><router-link to="/center">我的</router-link></li>
</ul>
  • 通过active-class="kerwin"来命名,使选中的显示高亮
<template><div class="tabbar"><ul><li><router-link to="/home" active-class="kerwin">首页</router-link></li><li><router-link to="/films"  active-class="kerwin">影院</router-link> </li><li><router-link to="/center"  active-class="kerwin">我的</router-link></li></ul></div></template>
<script setup></script>
<style scoped>
.kerwin{color: red;
}
.tabbar{position: fixed;width: 100%;height: 50px;line-height: 50px;text-align: center;bottom: 10px;
}
.tabbar ul{display: flex;}.tabbar ul li{flex:1;
}</style>

如图所示:
在这里插入图片描述

四、嵌套路由

一个路由组件下面,再嵌套路由,要将组件渲染到这个嵌套的 router-view 中,我们需要在路由中配置 children:

const routes = [{path: '/user',component: User,children: [{// 当 /user/profile 匹配成功// UserProfile 将被渲染到 User 的 <router-view> 内部path: 'profile',// path: '/user/profile'的简写,通过http://localhost:5173/#/user/profile访问component: UserProfile,},{// 当 /posts 匹配成功// UserPosts 将被渲染到 User 的 <router-view> 内部path: '/posts', //注:可以通过http://localhost:5173/#/posts访问component: UserPosts,},],},
]
注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。

四、命名路由

五、取消路由组件在前进后退

命名路由

二、嵌套(多级)路由

二级目录

三级目录

相关文章:

vue路由的基本使用

vue路由的基本使用 vue-router简介一、路由配置和使用1、安装2、创建路由实例2、在组件中引用路由 router-view ,如APP根组件中直接引用&#xff1a;3、最后还需要把路由挂载到APP实例中&#xff0c;在main.js中注册路由&#xff1a; 二、路由重定向与别名三、声明式导航1、传统…...

数据结构分类

数据结构(data structure)是计算机存储、组织数据的方式&#xff0c;是带有结构特性的数据元素的集合。是相互之间存在一种或多种特定关系的数据元素的集合&#xff0c;即带“结构”的数据元素的集合。这种“结构”指的是数据元素之间存在的关系&#xff0c;分为逻辑结构和存储…...

【STM32】 TCP/IP通信协议--LwIP介绍

LwIP&#xff08;Lightweight IP&#xff09;是一个轻量级的TCP/IP协议栈&#xff0c;专为嵌入式系统设计&#xff0c;以较小的资源消耗实现完整的网络功能。本文将详细介绍LwIP的基本概念、特点、与TCP/IP的区别以及如何在STM32上使用LwIP实现TCP/IP通信。 1. LwIP的定义和设…...

一些面试题整理

第一章、基础 以下是对上述10道面试题的参考答案&#xff1a; 一、Java语言及性能调优 答案&#xff1a; 线程安全问题是指多个线程同时访问共享资源时可能出现的数据不一致或错误的情况。例如&#xff0c;多个线程同时对一个共享变量进行写操作&#xff0c;如果没有适当的同…...

端口号和ip地址一样吗?区别是什么

在网络通信的世界里&#xff0c;端口号和IP地址是两个不可或缺的概念&#xff0c;它们各自扮演着独特的角色&#xff0c;共同维系着数据在网络中的有序传输。然而&#xff0c;对于许多初学者而言&#xff0c;这两者往往容易被混淆&#xff0c;认为它们是同一事物的不同表述。那…...

深入探讨全流量回溯分析与网络性能监控系统

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具 随着数据量的急剧增加&#xff0c;传统的网络监控手段面临诸多挑战。在此背景下&#xff0c;全流量回溯分析和网络性能监控系统成为了保障网络正常运作的重要工具。本文将围绕这两个关键词&#xff0c;探讨它…...

python机器人编程——一种3D骨架动画逆解算法的启示(上)

目录 一、前言二、fabrik 算法三、python实现结论PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关文章资源 一、前言 我们用blender等3D动画软件时&#xff0c;会用到骨骼的动画&#xff0c;通过逆向IK动力学…...

Flutter开发者必备面试问题与答案02

Flutter开发者必备面试问题与答案02 视频 https://youtu.be/XYSxTb0iA9I https://www.bilibili.com/video/BV1Zk2dYyEBr/ 前言 原文 Flutter 完整面试问题及答案02 本文是 flutter 面试问题的第二讲&#xff0c;高频问答 10 题。 正文 11. PageRoute 是什么&#xff1f; …...

拥抱真实:深度思考之路,行动力的源泉

在纷繁复杂的现代社会&#xff0c;人们往往被表象迷惑&#xff0c;忙碌于各种事务之中&#xff0c;却很少停下来进行深度思考。这种忙碌往往是表面的、无效的&#xff0c;因为它缺乏对自我和目标的深刻理解与追求。提升行动力&#xff0c;避免假勤奋&#xff0c;关键在于深度思…...

【Python爬虫实战】深入理解Python异步编程:从协程基础到高效爬虫实现

#1024程序员节&#xff5c;征文# &#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、异步 &#xff08;一&#xff09;核心概念 &#xff08;二&#xff09;…...

OpenCV图像处理方法:腐蚀操作

腐蚀操作 前提 图像数据为二值的&#xff08;黑/白&#xff09; 作用 去掉图片中字上的毛刺 显示图片 读取一个图像文件&#xff0c;并在一个窗口中显示它。用户可以查看这个图像&#xff0c;直到按下任意键&#xff0c;然后程序会关闭显示图像的窗口 # cv2是OpenCV库的P…...

PG数据库之流复制详解

一、流复制的定义 PostgreSQL流复制&#xff08;Streaming Replication&#xff09;是一种数据复制技术&#xff0c;它允许实时传输数据更改&#xff0c;从而在主服务器和一个或多个备用服务器之间保持数据同步。流复制是PostgreSQL数据库管理系统&#xff08;DBMS&#xff09…...

Python酷库之旅-第三方库Pandas(174)

目录 一、用法精讲 801、pandas.Categorical类 801-1、语法 801-2、参数 801-3、功能 801-4、返回值 801-5、说明 801-6、用法 801-6-1、数据准备 801-6-2、代码示例 801-6-3、结果输出 802、pandas.Categorical.from_codes方法 802-1、语法 802-2、参数 802-3、…...

【Linux网络】基于TCP的全连接队列与文件、套接字、内核之间的关系

W...Y的主页 &#x1f60a; 代码仓库管理&#x1f495; 前言&#xff1a;之前我们已经学习了TCP传输协议&#xff0c;而无论是TCP还是UDP都是使用socket套接字进行网络传输的&#xff0c;而TCP的socket是比UDP复杂的&#xff0c;当时我们学习TCPsocket编程时使用listen函数进行…...

IDE(集成开发环境)

IDE&#xff08;集成开发环境&#xff09;是软件开发过程中不可或缺的工具&#xff0c;它集成了代码编写功能、分析功能、编译器、调试器等开发工具&#xff0c;旨在提高开发效率。不同的IDE支持不同的语言和框架&#xff0c;下面是一些通用的IDE使用技巧和插件推荐&#xff0c…...

一键导入Excel到阿里云PolarDB-MySQL版

今天&#xff0c;我将分享如何一键导入Excel到阿里云PolarDB-MySQL版数据库。 准备数据 这里&#xff0c;我们准备了一张excel表格如下&#xff1a; 连接到阿里云PolarDB 打开的卢导表&#xff0c;点击新建连接-选择阿里云PolarDB-MySQL版。如果你还没有这个工具&#xff0c;…...

Oracle有哪些版本

目录 Oracle 1(1979年) Oracle 2(1983年) Oracle 7(1992年) Oracle 8i(1999年) Oracle 9i(2001年) Oracle 10g(2004年) Oracle 11g(2007年) Oracle 12c(2013年) Oracle 18c(2018年) Oracle 19c(2019年) Oracle 21c(2023年) Oracle 23ai(202…...

先来先服务(FCFS,First-Come, First-Served)调度算法

有利于CPU繁忙作业的原因 充分利用CPU资源&#xff1a; 当一个CPU繁忙型的作业到达后&#xff0c;它会立即被执行&#xff0c;并且在没有其他作业等待的情况下&#xff0c;可以一直占用CPU直到完成。这使得CPU能够持续地执行作业&#xff0c;最大化利用CPU资源。 减少上下文切换…...

Windows操作系统忘记密码怎么办 这个方法屡试不爽 还不来试一下

Windows操作系统重置密码的操作步骤如下&#xff1a; 本方法适用于Windows Server 2008R2及其之后的操作系统。 第一步&#xff1a;从Windows 2008R2之后的操作系统光盘启动到安装界面&#xff0c;一直下一步到磁盘分区界面&#xff0c;按shiftF10调出cmd命令行界面。 第二步&…...

基于java的山区环境监督管理系统(源码+定制+开发)环境数据可视化、环境数据监测、 环境保护管理 、污染防治监测系统 大数据分析

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...