Vue Router 使用教程

Vue Router 是 Vue.js 的官方路由管理器,它提供了一种方便的方式来管理应用的路由。在本教程中,我们将介绍 Vue Router 的一些常见用法和示例。

一、安装 Vue Router

使用 Vue Router 之前,需要先安装它。可以使用以下命令通过 npm 安装:

npm install vue-router

或者使用以下命令通过 yarn 安装:

yarn add vue-router

二、创建路由配置

在使用 Vue Router 之前,需要创建一个路由配置。路由配置是一个数组,其中包含了应用的所有路由。每个路由都有一个路径和一个组件。

以下是一个简单的路由配置示例:

import Vue from 'vue'
import VueRouter from 'vue-router'// 1. 定义路由组件
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')// 2. 定义路由配置
const routes: VueRouter.RouteConfig[] = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]// 3. 创建路由实例
const router = VueRouter.createRouter({history: VueRouter.createWebHashHistory(),routes
})// 4. 导出路由实例
export default router

在上述代码中,我们首先定义了两个路由组件 HomeAbout。然后,我们定义了一个路由配置 routes,其中包含了两个路由://about。最后,我们创建了一个路由实例 router,并将其导出。

三、使用路由

在组件中使用路由非常简单。我们只需要在组件的模板中使用 <router-link> 组件来创建链接,使用 <router-view> 组件来显示当前路由对应的组件。

以下是一个简单的组件示例:

<template><div><h1>My App</h1><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/about">About</router-link></li></ul><router-view /></div>
</template>

在上述代码中,我们在组件的模板中创建了两个链接:HomeAbout。当用户点击这些链接时,路由会导航到相应的路径,并显示对应的组件。

四、动态路由匹配

Vue Router 支持动态路由匹配。我们可以在路由路径中使用冒号 : 来定义动态参数。

以下是一个动态路由匹配的示例:

{path: '/user/:id',name: 'User',component: User
}

在上述代码中,/user/:id 是一个动态路由,其中 :id 是一个动态参数。我们可以在组件中使用 $route.params.id 来获取该参数的值。

五、嵌套路由

Vue Router 支持嵌套路由。我们可以在路由配置中定义子路由。

以下是一个嵌套路由的示例:

{path: '/parent',name: 'Parent',component: Parent,children: [{path: 'child',name: 'Child',component: Child}]
}

在上述代码中,我们定义了一个父路由 /parent,它包含一个子路由 /parent/child。当用户导航到 /parent 时,会显示 Parent 组件,当用户导航到 /parent/child 时,会显示 Child 组件。

六、路由懒加载

当应用的路由较多时,一次性加载所有路由可能会导致应用启动缓慢。为了提高应用的性能,我们可以使用路由懒加载。

以下是一个路由懒加载的示例:

{path: '/',name: 'Home',component: () => import('../views/Home.vue')
}

在上述代码中,我们使用 () => import('../views/Home.vue') 来动态加载 Home 组件。这样,只有当用户导航到 / 时,才会加载 Home 组件。

七、路由过渡效果

Vue Router 支持路由过渡效果。我们可以在路由配置中定义路由过渡效果。

以下是一个路由过渡效果的示例:

{path: '/',name: 'Home',component: Home,meta: {transition: 'fade'}
}

在上述代码中,我们在路由配置中定义了一个路由过渡效果 fade。在组件的模板中,我们可以使用 <transition> 组件来应用路由过渡效果。

八、导航守卫

Vue Router 支持导航守卫。导航守卫可以在路由导航之前或之后执行一些逻辑。

以下是一个导航守卫的示例:

router.beforeEach((to, from, next) => {// 登录验证逻辑if (!isLoggedIn && to.path!== '/login') {next('/login');} else {next();}
});

在上述代码中,我们定义了一个全局导航守卫。在导航之前,会检查用户是否登录。如果用户未登录,并且要访问的路径不是 /login,则会导航到 /login。如果用户已登录,或者要访问的路径是 /login,则会继续导航。

常用的调用ts示例:

	import { useRouter } from 'vue-router'const router = useRouter();//设置路由router.push("/admin/index/index")//获取路由console.log(router.currentRoute.value.path)

九、总结

在本教程中,我们介绍了 Vue Router 的一些常见用法和示例。Vue Router 是 Vue.js 的官方路由管理器,它提供了一种方便的方式来管理应用的路由。通过使用 Vue Router,我们可以实现路由的动态匹配、嵌套路由、路由懒加载、路由过渡效果和导航守卫等功能。

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

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

相关文章

笔记 | 软件工程03:软件过程和软件开发方法

软件过程 1 何为软件过程模型 1.1 软件开发的特点 1.2 软件过程 1.3 软件过程模型 1.3.1 软件过程模型产生的背景 软件工程产生之前的软件开发——作坊式的个人创作&#xff1a;聚焦于编写代码&#xff1b;依靠个体技能&#xff0c;缺乏合作&#xff1b;关注时空利用&#x…

SWIG源码安装

SWIG源码安装 https://github.com/swig 下载源码首先需要先生成.configure&#xff0c;在执行make & make install ./autogen.sh test -d Tools/configaclocal -I Tools/config ./autogen.sh: 11: aclocal: not found报错了 解决方案&#xff0c;安装automake sudo ap…

Threejs加载DOM+CSS到场景中,实现3D场景展示2D平面的效果

1. 前言 本篇文章主要实现了将DOM元素转换为Threejs可以使用的数据结构,使用CSS2DRenderer渲染器渲染这些DOMCSS的平面,使其可以作为一个物体添加到Threejs场景里 如下效果图: 2. 实现步骤 首先创建一个ThreejsVueVite的项目,作为本次的demo项目下载Threejs第三方库 yarn…

C++候捷stl-视频笔记4

一个万用的hash function 哈希函数的形式&#xff0c;一种是一般函数(右边)&#xff0c;一种是成员函数(左边)&#xff0c;类的对象将成为函数对象 具体做法例子。直接把属性的所有hash值加起来&#xff0c;会在hashtable中会产生很多的碰撞&#xff0c;放在同一个bucket中的元…

游戏UI设计秘诀:专家总结与实际案例解析!

随着游戏产业的不断发展&#xff0c;游戏UI界面设计变得越来越重要。一个好的游戏UI界面设计可以让玩家更容易理解游戏规则&#xff0c;提高游戏的可玩性&#xff0c;增加游戏的吸引力。在本文中&#xff0c;我们将讨论游戏UI界面设计的重要性和一些常见的设计原则。 1. 游戏U…

为什么要选择AWS?AWS的优势有哪些?

在当今时代,云计算已经成为各行各业的必备技术。作为全球领先的云计算平台,AWS(Amazon Web Services)凭借其卓越的性能、可靠性和创新能力,吸引了无数企业和个人开发者选择使用其服务。但是,为什么要选择AWS呢?AWS又有哪些独特的优势呢?让我们结合九河云的分析一起探讨一下。…

前端框架中的虚拟DOM和实际DOM之间的关系

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介前端框架中的虚拟DOM和实际DOM之间的关系1. 实际DOM&#xff08;Real DOM&#xff09;1.1 定义1.2 特点 2. 虚拟DOM&#xff08;Virtual DOM&#xff09;2.1 定义2.2 特点 3. 虚拟DOM的工作流程3.1 创建虚拟DOM3.2 比较虚拟DOM&…

Django redirect()函数实现页面重定向

1&#xff0c;通过路由反向解析进行重定向 1.1 添加视图函数 myshop/app2/views.py from django.http import HttpResponse from django.shortcuts import render from django.urls import reverse def index(request):return HttpResponse("app2 的index")# 反向…

PVE安装虚拟主机

本文记录PVE安装其他虚拟主机的步骤&#xff0c;以安装win-server为例。裸机安装PVE则不是本文主题。 准备文件 获取Windows系统镜像 win server镜像可以从官网获取普通Windows镜像可从MSDN获取此外&#xff0c;安装Windows系统还需要从PVE下载特殊驱动 获取Windows必要驱动 …

康谋技术 | 自动驾驶:揭秘高精度时间同步技术(二)

在自动驾驶中&#xff0c;对车辆外界环境进行感知需要用到很多传感器的数据&#xff08;Lidar&#xff0c;Camera&#xff0c;GPS/IMU&#xff09;&#xff0c;如果计算中心接收到的各传感器消息时间不统一&#xff0c;则会造成例如障碍物识别不准等问题。 为了对各类传感器进…

提高工作效率的神器有哪些?

在这个人工智能技术蓬勃发展的时代&#xff0c;很多AI工具极大地提升我们的工作效率&#xff0c;比如很多人在用的ChatGPT、Kimi&#xff0c;它们几乎无所不能&#xff0c;小编在日常工作也用它们&#xff0c;建议想抓住AI风口&#xff0c;或者是想用这些工具提升自己的朋友去学…

2024年BCSP-X小学高年级组初赛真题解析

一、单项选择题(共15题,每题2分,共计30分) 计算机在工作过程中突然停电,() 中的信息不会丢失。 A. 缓存 B. 寄存器 C. RAM D. ROM正确答案是 D. ROM。 首先,我们来看看计算机中几种不同的存储器: 1 . 缓存(Cache):位于CPU内部或非常靠近CPU,用于存储CPU即将使用的数据和指令。…

windows10 安装子linux系统(WSL安装方式)

在 windows 10 平台采用了WSL安装方式安装linux子系统 1 查找自己想要安装的linux子系统 wsl --list --online 2 在线安装 个人用Debian比较多&#xff0c;这里选择Debian&#xff0c;如下图&#xff1a; wsl --install -d Debian 安装完成&#xff0c;如下&#xff1a; 相关…

【JS重点知识03】定时器—间歇函数

一&#xff1a;间歇函数的应用场景 网页倒计时是需要每个一段时间需自动执行一段代码&#xff0c;而不需要手动去触发&#xff1b;间歇函数刚好满足了这一要求&#xff1b; 二&#xff1a;间歇函数的使用 1 开启定时器 语法规范&#xff1a; 1 setInterval(匿名函数,时间)…

Java版电商平台B2B2C:多商家直播商城系统特性解析

B2B2C平台&#xff0c;立足于传统电商领域&#xff0c;同时引入了创新的商业模式。该平台不仅支持商家入驻和平台自营&#xff0c;还积极构建了一个全新的市场环境&#xff0c;旨在为各行各业及互联网创业者提供更多收益机会。 该平台以消费者需求为中心&#xff0c;帮助企业构…

PyQt5+SQLlite3基于邮箱验证的登陆注册找回系统

本期教程投稿一篇实用性的基于邮箱登陆注册找回于一体的系统&#xff0c;在日常的开发和软件应用中非常常见&#xff0c;并且也使用了逻辑与界面分离的写法&#xff0c;那这个文章将详细的为大家介绍整个流程&#xff0c;但是细节的话还需要大家自己去完善&#xff0c;也欢迎大…

人工智能的兴起和发展

人工智能的兴起 人工智能&#xff0c;artificial intelligence&#xff0c;缩写为AI。 它是随着计算机技术的发展才逐步产生并发展起来的一门学科。关于AI的定义有很多种&#xff0c;通俗一点说&#xff0c;它企图了解智能的实质&#xff0c;并生产出一种新的&#xff0c;能以…

ekho 编译安装

ekho 编译安装 ekho 编译安装ekho 介绍源码下载源码编译编译依赖编译 测试 参考文献 ekho 编译安装 ekho 介绍 Ekho&#xff08;余音&#xff09;是一个免费、开源的中文语音合成软件。它是eGuideDog project.项目的一部分。 它目前支持粤语、普通话&#xff08;国语&#xf…

【无人机协同】基于改进灰狼算法实现多峰环境下的多无人机协同路径规划附matlab代码

% 初始化算法参数 num_drones 5; % 无人机数量 num_iterations 100; % 迭代次数 num_wolves 20; % 灰狼数量 alpha 0.5; % 狼群更新参数 beta 0.8; % 狼个体更新参数 delta 0.5; % 灰狼群体更新参数 lb [0 0]; % 路径范围下限 ub [100 100]; % 路径范围上限 % 初始化无…

Transformer学习(2)

这是Transformer的第二篇文章&#xff0c;上篇文章中我们了解了分词算法BPE&#xff0c;本文我们继续了解Transformer中的位置编码和核心模块——多头注意力。下篇文章就可以实现完整的Transformer架构。 位置编码 我们首先根据BPE算法得到文本切分后的子词标记&#xff0c;然…