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

路由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. 查看效果

点击登录跳转登录页面

点击首页跳转首页页面

相关文章:

  • windbg托管内存泄漏排查
  • 魔众 文库配置异步转换
  • 网格矢量如何计算莫兰指数
  • SpringBoot学习之Kibana下载安装和启动(Mac版)(三十二)
  • Mac下Docker Desktop starting的解决方法
  • 电商系列之风控安全
  • C++--友元
  • 蓝桥杯 经验技巧篇
  • Linux中磁盘管理
  • 白色磨砂质感html5页源码
  • 【Redis】NoSQL之Redis的配置和优化
  • 51单片机实验02- P0口流水灯实验
  • 操作系统原理及安全2-进程管理实验(验证型)_创建一个子进程,显示new process(1)
  • Chrome浏览器如何跟踪新开标签的网络请求?
  • Codeforces Round 938 (Div. 3) (A~E)
  • Linux云计算之Linux基础2——Linux发行版本的安装
  • GitHub入门与实践
  • 华为ipsec vpn配置案例
  • 备考ICA----Istio实验17---TCP流量授权
  • .NET 设计模式—装饰器模式(Decorator Pattern)
  • https://app.hackthebox.com/machines/Inject
  • Spring —— Spring简单的读取和存储对象 Ⅱ
  • 渗透测试之冰蝎实战
  • Mybatis、TKMybatis对比
  • Microsoft Office 2019(2022年10月批量许可版)图文教程
  • 《谷粒商城基础篇》分布式基础环境搭建
  • 哈希表题目:砖墙
  • Vue 3.0 选项 生命周期钩子
  • 【车载嵌入式开发】AutoSar架构入门介绍篇
  • 【计算机视觉 | 目标检测】DETR风格的目标检测框架解读