Vue3使用Vue Router4實現頁面切換

前言

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时,URL 会随之更新,但页面不需要从服务器重新加载。

下面我將開始介紹vue router的基本用法

添加组件 RouterLink 、RouterView

新建一個Vue3項目vue_router2,修改App.vue如下:

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

在这个 template 中使用了两个由 Vue Router 提供的组件: RouterLink 和 RouterView

不同于常规的 <a> 标签,我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL,处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中,你可以把它放在任何地方,但它需要在某处被导入,否则 Vue Router 就不会渲染任何东西。

创建路由器实例

在src下面新建router目錄,并在router目錄下新建index.ts

路由器实例是通过调用 createRouter() 函数创建的:

这里的 routes 选项定义了一组路由,把 URL 路径映射到组件。其中,由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。这里的 history 选项控制了路由和 URL 路径是如何双向映射的。

index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'//1.创建路由器实例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue')}]
})export default router

 注册路由器插件

在main.ts裏面注冊路由插件

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'//2.注册路由器插件
const app = createApp(App)app.use(router)app.mount('#app')

一旦创建了我们的路由器实例,我们就需要将其注册为插件,这一步骤可以通过调用 use() 来完成。

vue_router2

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

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

相关文章

RuoYi-Vue3不启动后端服务如何登陆?

RuoYi-Vue3不启动后端服务如何登陆?RuoYi-Vue3使用的前端技术栈 是:Vue3 + Element Plus + Vite。 github开源地址:https://github.com/yangzongzhuan/RuoYi-Vue3 前后的分离在线演示项目地址:https://vue.ruoyi.vip/ 这种方式是用若依提供的在线后端接口,可以在此基础上修…

数据格式转换 | 稀疏矩阵3列还原为原始矩阵/数据框,自定义函数 df3toMatrix()

1. 输入3列 只要前三列&#xff0c;第一列是行名&#xff0c;第二列是列名&#xff0c;第三列为值。 > head(df.net2.order)from to strength type 12439 CSTF2 ENST0000056844 -0.6859788 neg 12015 CSTF2 ENST0000056190 -0.5153181 neg 11208 CSTF2 …

三阶魔方公式详解及快速解法方法介绍

三阶魔方公式详解及快速解法方法介绍 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来深入探讨三阶魔方的公式及其快速解法方法。无论是初学者还是已经…

Webpack: 构建 NPM Library

概述 虽然 Webpack 多数情况下被用于构建 Web 应用&#xff0c;但与 Rollup、Snowpack 等工具类似&#xff0c;Webpack 同样具有完备的构建 NPM 库的能力。与一般场景相比&#xff0c;构建 NPM 库时需要注意&#xff1a; 正确导出模块内容&#xff1b;不要将第三方包打包进产…

IDM(Internet Download Manager)下载器的安装激活与换机方法 IDM怎么用

很多人都知道 Internet Download Manager(以下简称 IDM)是一款非常优秀的下载提速软件。它功能强大&#xff0c;几乎能下载网页中的所有数据&#xff08;包括视频、音频、图片等&#xff09;&#xff0c;且适用于现在市面上几乎所有的浏览器&#xff0c;非常受大家欢迎。IDM 是…

河南企业劳务资质申请:技术负责人角色与职责

河南企业劳务资质申请中&#xff0c;技术负责人的角色与职责至关重要&#xff0c;以下是对其角色与职责的清晰归纳&#xff1a; 一、角色定位 技术核心&#xff1a;技术负责人是企业技术团队的核心&#xff0c;是企业技术实力和专业水平的象征。战略规划者&#xff1a;根据行…

subline设置打开文件重启一个新的窗口

问题 打开文件后&#xff0c;用的是同一个窗口的子tab页面 想要打开一个新的窗口 解决 点解preferences->setting 在右边的配置文件新增一行 “open_files_in_new_window”: “always” 保存 搞定&#xff01;

uniapp小程序打开地图导航

uniapp uni.getLocation({type: gcj02, //返回可以用于uni.openLocation的经纬度success: function (res) {const latitude res.latitude;const longitude res.longitude;uni.openLocation({latitude: latitude,longitude: longitude,success: function () {console.log(suc…

LeetCode 1667, 36, 199

目录 1667. 修复表中的名字题目链接表要求知识点思路代码 36. 有效的数独题目链接标签思路代码 199. 二叉树的右视图题目链接标签思路代码 1667. 修复表中的名字 题目链接 1667. 修复表中的名字 表 表Users的字段为user_id和name。 要求 编写解决方案&#xff0c;修复名字…

SET加密:电子商务安全的基石

随着电子商务的飞速发展&#xff0c;如何确保在线交易的安全性和可信度已成为消费者、商家和金融机构共同关注的焦点。SET协议&#xff08;Secure Electronic Transaction&#xff09;作为一种安全电子交易的国际标准&#xff0c;凭借其卓越的安全性能和广泛的行业认可&#xf…

食品行业怎么用JSON群发短信

食品作为日常生活不可缺少的元素&#xff0c;市场需求是很稳定的&#xff0c;但是份额就那么多&#xff0c;商家都要来抢占的话&#xff0c;就需要运营推广各凭本事&#xff0c;市场运营中选择合适的推广方式&#xff0c;可以增加店铺销售额&#xff0c;很多实体店或商城都会建…

MATLAB-振动问题:两自由度耦合系统自由振动

一、基本理论 二、MATLAB实现 以下是两自由度耦合系统自由振动质量块振动过程动画显示的MATLAB程序。 clear; clc; close allx0 1; D1 40; D12 8; D2 D1; m1 1; omega0 sqrt(D1/m1); k1 D12 / D1; k2 D12 / D2; k sqrt(k1 * k2); omegazh omega0 * sqrt(1 k); omeg…

pytest中的极其重要固件(request)的理解

pytest 是一个非常流行的Python测试框架&#xff0c;它为开发人员提供了丰寴的测试工具和功能。 在pytest中&#xff0c;固件&#xff08;fixture&#xff09;是一种非常核心的概念&#xff0c;用于设置测试前的预条件&#xff0c;清理测试后的环境&#xff0c;或者提供测试过…

高效实现虚拟机(VMware)安装教程(附安装包)

目录 一.下载VMware Wworkstation Pro 二 安装&#xff1a; 注&#xff1a;若是安装完VMware&#xff0c;还想在上面安装Centos、Ubuntu&#xff0c;系统请转到基于VMware的linux操作系统安装&#xff08;附安装包&#xff09;-CSDN博客 一.下载VMware Wworkstation Pro 渠道…

文心一言用户达3亿!文心大模型4.0 Turbo发布,支持API,真GPT-4 Turbo国产来了!

文心一言用户规模达到3亿了&#xff01; 这是笔者在今天的百度Wave Summit 2024大会上的看到的数字。需要强调的是&#xff0c;文心一言的用户规模是在去年12月破亿的。这意味着&#xff0c;仅仅隔了6个月&#xff0c;文心一言用户数量在亿这个级别的数字上竟然直接翻了三倍。…

【C++】线程库

在 C11 问世之前&#xff0c;多线程基本和平台关系密切&#xff0c;不同的平台下多线程各有特点&#xff0c;使得 Windows 和 Linux 下必须拥有各自的系统调用接口&#xff0c;但同时也使得代码的可移植性较差。 C11中最重要的特性&#xff0c;就是支持了多线程编程&#xff0c…

【高性能服务器】服务器概述

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ 服务器概述 服…

计算机网络 —— 基本概念

基本概念 1. 通信协议2. 面向连接 v.s. 面向无连接3. 电路交换 v.s. 分组交换4. 单工通信 v.s. 双工通信 1. 通信协议 通信协议就是计算机与计算机之间通过网络实现通信时事先达成的一种“约定”。这种“约定”使那些由不同厂商的设备、不同的CPU 以及不同的操作系统组成的计算…

C# 实现websocket双向通信

&#x1f388;个人主页&#xff1a;靓仔很忙i &#x1f4bb;B 站主页&#xff1a;&#x1f449;B站&#x1f448; &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C# &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff…

人工智能在多模态多组学领域的最新研究进展|顶刊速递·24-06-29

小罗碎碎念 本期推文主题&#xff1a;人工智能在多模态与多组学中的最新研究进展 今天这期推文比较特殊&#xff0c;起来就开始干活&#xff0c;只能跑来会场写了。 小罗观点 今天这期推文覆盖面挺广的&#xff0c;前四篇与肿瘤治疗相关&#xff0c;并且两篇都直接与免疫微环境…