路由Vue-Router使用

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

介绍 | Vue Router (vuejs.org)

1. 安装

npm install vue-router@4

查看安装好的vue-router

 2. 添加路由

新建views文件夹用来存放所有的页面,在views文件夹中新建Home.vue和Login.vue两个页面

新建router文件夹,用于存放所有路由,新建文件 index.ts

其中createWebHistory 和 createWebHashHistory 是 Vue Router 中用来创建不同路由管理模式的两个函数。它们的主要区别在于如何管理和处理浏览器的 URL 路径以及对服务器和旧版浏览器的支持程度。

createWebHistory

  • 使用 HTML5 History API 来实现路由管理,它允许 URL 显示为标准的路径形式,如 /about/contact,而不会包含 # 符号(即不使用 hashbang 路由)。

createWebHashHistory

  • 使用传统的 URL hash (#) 来追踪路由状态,URL 形如 http://example.com/#/about

3. 在main.ts文件加入路由并使用

4.在App.vue 添加导航,并使用router-view

<RouterLink> 负责在单页应用内部进行导航,而 <RouterView> 则是根据当前的导航状态展示相应的组件内容。两者结合使用,共同构成了 Vue Router 中的页面跳转和内容呈现的核心机制。 

5. 查看效果

点击登录跳转登录页面

点击首页跳转首页页面

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初入职,如何用好 git 快速上手项目开发

前言 介绍在工作中使用 git 工具 文章目录 前言一、git 简介1、是什么作用操作3、用途 二、基本概念1、工作区2、暂存区3、版本库4、操作过程 三、基本命令操作 一、git 简介 1、是什么 git 是一个方便管理代码版本的工具&#xff0c;用一个树结构来维护和管理所有的历史版本…

数据结构记录

之前记录的数据结构笔记&#xff0c;不过图片显示不了了 数据结构与算法(C版) 1、绪论 1.1、数据结构的研究内容 一般应用步骤&#xff1a;分析问题&#xff0c;提取操作对象&#xff0c;分析操作对象之间的关系&#xff0c;建立数学模型。 1.2、基本概念和术语 数据&…

Finite Element Procedures K.J.Bathe 【教材pdf+部分源码】|有限元经典教材 | 有限元编程

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

flask的使用学习笔记1

跟着b站学的1-06 用户编辑示例_哔哩哔哩_bilibili flask是一个轻量级&#xff0c;短小精悍&#xff0c;扩展性强&#xff0c;可以扩展很多组件&#xff0c;django大而全 编程语言它们的区别&#xff1a; (这些语言都很了解&#xff0c;java和python是高级语言&#xff0c;都…

动手做一个最小Agent——TinyAgent!

Datawhale干货 作者&#xff1a;宋志学&#xff0c;Datawhale成员 前 言 大家好&#xff0c;我是不要葱姜蒜。在ChatGPT横空出世&#xff0c;夺走Bert的桂冠之后&#xff0c;大模型愈发地火热&#xff0c;国内各种模型层出不穷&#xff0c;史称“百模大战”。大模型的能力是毋…

UE4几个常用节点链接

UE4几个常用节点链接 2017-12-02 12:54 1. 流光材质(及uv平铺次数) 2. 跑九宫格 3.闪光3。1 粒子闪烁效果 4.图案重复5.平移扭曲 6.溶解 刀光的uv滚动图片源或采样节点属性里改成clamp无后期发光光晕anistropic 各向异性高光法线图 法线图叠加 blendangle orrectedNo…

探索设计模式的魅力:揭秘B/S模式在AI大模型时代的蜕变与进化

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 揭秘B/S模式在AI大模型时代的蜕变与进化 &#x1f680;在AI的波澜壮阔中&#xff0c;B/S模式&…

为 AI 而生的编程语言「GitHub 热点速览」

Mojo 是一种面向 AI 开发者的新型编程语言。它致力于将 Python 的简洁语法和 C 语言的高性能相结合&#xff0c;以填补研究和生产应用之间的差距。Mojo 自去年 5 月发布后&#xff0c;终于又有动作了。最近&#xff0c;Mojo 的标准库核心模块已在 GitHub 上开源&#xff0c;采用…

面试题:JVM 调优

一、JVM 参数设置 1. tomcat 的设置 vm 参数 修改 TOMCAT_HOME/bin/catalina.sh 文件&#xff0c;如下图 JAVA_OPTS"-Xms512m -Xmx1024m" 2. springboot 项目 jar 文件启动 通常在linux系统下直接加参数启动springboot项目 nohup java -Xms512m -Xmx1024m -jar…

前端html+css+js常用总结快速入门

&#x1f525;博客主页&#xff1a; A_SHOWY&#x1f3a5;系列专栏&#xff1a;力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 学习前端全套所有技术性价比低下且容易忘记&#xff0c;先入门学会所有基础的语法&#xff08;cssjsheml&#xff09;&#xff…

Valkey是一个新兴的开源项目,旨在成为Redis的替代品,背后得到了AWS、Google、Oracle支持

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

Windows 禁用 Defender

原文&#xff1a;https://blog.iyatt.com/?p8078 2024.4.4 Windows 11 专业版 23H2 Beta 预览版 进入安全中心&#xff0c;关闭所有&#xff0c;特别是篡改防护选项 打开注册表 地址栏粘粘路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Defende…

Rust线程间通信通讯channel的理解和使用

Channel允许在Rust中创建一个消息传递渠道&#xff0c;它返回一个元组结构体&#xff0c;其中包含发送和接收端。发送端用于向通道发送数据&#xff0c;而接收端则用于从通道接收数据。不能使用可变变量的方式&#xff0c;线程外面修改了可变变量的值&#xff0c;线程里面是拿不…

使用libibverbs构建RDMA应用

本文是对论文Dissecting a Small InfiniBand Application Using the Verbs API所做的中英文对照翻译 Dissecting a Small InfiniBand Application Using the Verbs API Gregory Kerr∗ College of Computer and Information ScienceNortheastern UniversityBoston, MAkerrgccs…

RAG原理、综述与论文应用全解析

1. 背景 1.1 定义 检索增强生成 (Retrieval-Augmented Generation, RAG) 是指在利用大语言模型回答问题之前&#xff0c;先从外部知识库检索相关信息。 早在2020年就已经有人提及RAG的概念&#xff08;paper&#xff1a;Retrieval-augmented generation for knowledge-inten…

UE4_材质节点

UE4_材质节点 2017-12-07 13:56 跑九宫格 跑UV 评论(0)

AI技术助推汽车行业走向更光明的未来

我们在汽车上度过的时间很多&#xff0c;有时候由于交通、天气和其他路况问题&#xff0c;我们在汽车上度过的时间之久甚至会出乎意料。正因如此&#xff0c;保障旅途体验的舒适和安全就显得至关重要。交通事故每天都会发生&#xff0c;因此在车辆中采取额外的安全措施对于所有…

Windows下用CMake编译PugiXML及配置测试

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 PugiXML是什么&#xff1f; PugiXML 是一个用于解析和操作 XML 文档的 C 库。它提供了简单易用的接口&#xff0c;能够高效地加载…

0基础安装配置Linux-ubuntu环境

Vmtools的安装参见 0基础教你安装VM 17PRO-直接就是专业许可证版_vm17许可证-CSDN博客 在vmtools中安装ubuntu 等待安装 这时候发现没有继续按钮&#xff0c;我们关闭这个界面&#xff0c;进入系统中&#xff0c;先更改分辨率 点击这个三角&#xff0c;因为还么有安装成功&am…

WSJ0源数据处理,wv转换为wav

WSJO数据集原始 文件.wv1&.wv2转换成wav文件 ​ 最近做语音分离实验需要用到wsj0-2mix数据集&#xff0c;但是从李宏毅语音分离教程里面获取的wsj0-2mix只有一部分。从网上获取到了完整的WSJO数据集后&#xff0c;由于原始的语音文件后缀是wv1或者wv2&#xff0c;创建wsj0…