Vue3快速上手(十五)Vue3路由器使用和简单路由切换

本文主要是介绍Vue3快速上手(十五)Vue3路由器使用和简单路由切换,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

一、路由的概念

1.1 路由及路由器

路由器:通常指的是我们家里上网用的路由器,通过网络接口,一根网线,链接至电脑,一般我们的电脑就可以上网了,多个网络接口,链接多个电脑,形成一组路由。而路由器就是管理这些路由线路的。
Vue里的路由器也是这个意思,通过点击,输入的方式使得浏览器得知发生变化的时候,路由器可以通过当前页面的地址,定位对应的组件,从而显示到指定页面。这里路径和页面组件就是一组一组的路由,而Vue的路由器是用来管理这些路由的。

1.2 安装路由器

一般是建立vue3项目的时候,就可以选择直接添加路由。
这里是手动添加的方式,如下:

wangdy@mb vue3_study % npm i vue-router
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.9.4',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.0.11',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }added 2 packages in 1s

二、路由器的配置

2.1 创建路由器

首先呢,需要在src下建立一个路由器目录,并添加如下代码:
在这里插入图片描述
这里是创建一个路由器,并将一组一组的路由配置到routes里。这里引入了3个页面组件,用来切换和显示

import { createRouter, createWebHistory } from "vue-router";
import PersonVue from "@/components/Person.vue";
import ComputedVue from "@/components/computed.vue";
import PropsPersonVue from "@/components/propsPerson.vue";// 创建1个路由器
const router = createRouter({// 路由器的工作模式history: createWebHistory(),/* 多个路由配置 */routes: [{path: '/person',component: PersonVue},{name:'jisuan'path: '/computed',component: ComputedVue},{path: '/PropsPersonVue',component: PropsPersonVue}]
});
// 暴露router
export default router

2.2 使得路由器生效

需要修改main.ts文件,将路由器引入。如下,引入路由器,然后use即可。

import { createApp } from 'vue'
import App from './App.vue'
/* 引入路由器 */
import router from './router'const app = createApp(App)
// 使用路由器
app.use(router)
app.mount('#app')

三、改造App.vue实现路由切换

这里说明下,修改app页面,3个按钮分别对应不同的路由,然后通过RouterViewRouterLink配合进行路由切换和展示。

<script setup lang="ts">
import { RouterView } from 'vue-router';
</script>
<template><div class="app"><!-- 导航 --><div class="nav"><RouterLink to="/person" active-class="active">person</RouterLink><RouterLink :to="{name: 'jisuan'}" active-class="active">computed</RouterLink><RouterLink :to="{path: '/PropsPersonVue'}" active-class="active">PropsPersonVue</RouterLink><!-- <a href="/person" class="active">person</a><a href="/computed">computed</a><a href="/PropsPersonVue">PropsPersonVue</a> --></div><!-- 显示区 --><div class="main"><RouterView></RouterView></div></div>
</template><style scoped>
.app {width: 60%;
}
.active {background-color: beige;
}
.nav {margin-bottom: 15px;a {border: 1px solid black;margin-right: 10px;}
}
.main {width: 100%;height: 500px;border: 1px solid black;
}</style>

效果如下:
在这里插入图片描述
结合App.vue代码和上图可以看出:

  1. 通过<RouterLink to="/person" active-class="active">person</RouterLink> 来识别和控制路由切换,以及选中样式的添加。
  2. to有3种写法,:to="{path:'/PropsPersonVue'}"to="/person" :to="{name: 'jisuan'}"
  3. 通过<RouterView></RouterView>来定位路由切换后页面组件的显示位置。
  4. 通过Vue插件可以直观的查看路由的变化。

四、通过方法调用控制路由跳转

在实际开发中,我们经常是通过在<script>脚本里来进行路由跳转的,直接用<RouterLink>的时候较少。
如下,将跳转person的路由替换成一个button,调用一个方法。在方法中进行跳转路由,这里需要引入useRouter,并使用router.push或者router.replace方法进行路由跳转。方法里的内容和<RouterLink>里属性to的内容完全是一样的。
其中,push和replace的区别就是,push的留存浏览记录的,可以在浏览器前进和回退里进行操作上一步或者下一步,而replace是不保存浏览记录的。在浏览器前进和回退是无法点击的。

<button @click="toPerson()">Person</button>
<script setup lang="ts">
import { useRouter } from 'vue-router';const router = useRouter();
function toPerson() {router.push({path: '/person',query: {id: 1,name: '王大拿',age: 56}})
}
</script>

看效果:
在这里插入图片描述

END

这篇关于Vue3快速上手(十五)Vue3路由器使用和简单路由切换的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/767027

相关文章

JavaScript与HTML交互

JavaScript与HTML交互 一、在页面中直接编写JS代码二、从外部引入JS代码 一、在页面中直接编写JS代码 首先创建一个html页面,并在页面中编写一段JS代码,注意,JS代码要放在标签中,然后实现html代码和JavaScript的交互。 <!DOCTYPE html><html lang="en">

spring 缓存 spring cache 介绍和简单实现

我们知道缓存对于提高系统的性能有着非常重要的影响,spring在3.*的版本之后集成了cache技术,并且是基于annotation的实现,使用起来还是非常方便的。这里只是对spring cache做一个简单的了解。 业务层实现如下: @Servicepublic class BookService {@Resourceprivate BookMapper bookMapper;@Cach

spring cloud vue thymeleaf实现CRUD的简单案例

现在关于Vue的实例说明很少,最近由于给学生们讲课,自己亲自做了一个Demo,贴出来与大家共享,还望大家多多批评指点。 项目架构: 1:创建pom(student-vue)项目,并导入如下依赖: <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xs

使用Filter解决重复提交

重复提交是软件中的一个比较严重的问题,轻则会导致数据重复,增加服务器负担,重则导致服务器宕机。因此需要对重复提交进行处理。导致重复提交的原因主要是因为HTTP协议是“无状态”的,也就是说客户端每次发送的请求服务器没有“记忆”功能,而解决“无状态”的问题一般是通过以下4种技术进行解决的: 1:表单隐藏域(<input type="hidden" .....>) 2: ur

不说成为Linux高级工程师,但成为合格的软件开发人员还是够了,一文深入浅出的精炼总结Linux核心知识点,掌握Linux的使用与高阶技巧

不说成为Linux高级工程师,但成为合格的软件开发人员还是够了,一文深入浅出的精炼总结Linux核心知识点,掌握Linux的使用与高阶技巧。 Linux 的学习对于一个程序员的重要性是不言而喻的。前端开发相比后端开发,接触 Linux 机会相对较少,因此往往容易忽视它。但是学好它却是程序员必备修养之一。 Linux是基于Linux内核的整个开源Unix操作系统家族。这包括所有最流行的基于Lin

Promise模块化编程ES6新特性

文章目录 Promise&模块化编程1.Promise基本介绍2.快速入门1.需求分析2.原生ajax + jQuery3.Promise使用模板 3.课后练习1.原生ajax + jQuery2.promise 4.模块化编程基本介绍5.CommonJS基本介绍6.ES5模块化编程1.题目2.示意图3.代码实例—普通导入导出function.jsuse.js 4.代码实例—对象解构导入

Kubernetes集群kubectl命令的常见使用方法

简介:kubectl是一个命令行界面,用于运行针对Kubernetes群集的命令。 语法: kubectl [command] [TYPE] [NAME] [flags] command:指定您希望对一个或多个资源执行的操作,例如创建,获取,描述,删除。 TYPE:指定资源类型。 资源类型区分大小写,可以使用单数,复数或缩写形式。 NAME:指定资源的名称。 名称区分大小写。 如果省略名称,则会显

centOS7.2使用yum安装kubernetes

2015年9月1日,CentOS 已经把 Kubernetes 加入官方源,所以现在安装Kubernetes已经方便很多。 master包含kube-apiserver kube-scheduler kube-controller-manager etcd四个组件 node包含kube-proxy kubelet flannel 3个组件 kube-apiserver:位于master节点,接

如何使用Python进行Web开发,如Flask或Django?

Python是一种非常流行的Web开发语言,它提供了多种框架来帮助开发者快速构建Web应用程序。Flask和Django是两个非常受欢迎的Python Web框架,它们各有特点和优势。 Flask Flask是一个轻量级的Web应用框架,它易于上手且灵活。Flask适合小型项目和微服务架构,也适用于大型项目的原型设计阶段。 1.安装Flask: pip install Flask 2.创

LINUX中使用cron定时任务被隐藏,咋回事?

一、问题现象 线上服务器运行过程中,进程有莫名进程被启动,怀疑是有定时任务自动启动,当你用常规方法去查看,比如使用crontab去查看定时器任务,提示no crontab for root 或者使用cat到/var/spool/cron目录下去查看定时器文件,也是提示no crontab for root 使用vim编辑定时器文件,打眼一看看到的似乎也是空白 但是你从cron定