【Vue3+Vite】路由机制router 快速学习 第四期

文章目录

  • 路由简介
    • 路由是什么
    • 路由的作用
  • 一、路由入门案例
    • 1. 创建项目 导入路由依赖
    • 2. 准备页面和组件
    • 3. 准备路由配置
    • 4. main.js引入router配置
  • 二、路由重定向
  • 三、编程式路由(useRouter)
  • 四、路由传参(useRoute)
  • 五、路由守卫
  • 总结

路由简介

路由是什么

路由就是根据不同的 URL 地址展示不同的内容或页面。
页面切换

路由的作用

  • 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
  • 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
  • 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

一、路由入门案例

创建路由基本流程：

  • 页面组件准备
  • App主体页 :
    • 定义 路由链接 <router-link to="/">
    • 定义 路由显示位置 <router-view name="homeView">
  • js配置路由：
    • 导入路由vue-router相关依赖 createRouter 和 createWebHashHistory方法
    • 创建路由方法 声明路由规则 createRouter()
      • path:'/'
      • components:{ homeView:Home }
    • 对外暴露router对象变量 给main.js
  • main.js中导入router配置
    • import 路由js
    • 绑定路由对象 app.use(router)

需求分析：
在这里插入图片描述

1. 创建项目 导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

2. 准备页面和组件

  • components/Home.vue
<script setup>
</script><template><div><h1>Home页面</h1></div>
</template><style scoped>
</style>
  • components/List.vue
<script setup>
</script><template><div><h1>List页面</h1></div>
</template><style scoped>
</style>
  • App.vue
<script setup>
</script><template><div><h1>App页面</h1><hr /><!-- 路由的连接 --><router-link to="/">home页</router-link><br /><router-link to="/list">list页</router-link><br /><!-- 路由连接对应视图的展示位置 --><hr />默认展示位置:<router-view></router-view><hr />Home视图展示:<router-view name="homeView"></router-view><hr />List视图展示:<router-view name="listView"></router-view><hr /></div>
</template><style scoped>
</style>

3. 准备路由配置

  • createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。
  • 在使用这种模式下，路由信息保存在 URL 的 hash 中，
  • 使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。
  • 在 Vue.js 应用中：
    - 通常使用该方法来创建路由的历史记录对象。
    - 就是路由中缓存历史记录的对象，vue-router 提供
  • src/routers/router.js
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'// 创建路由对象,声明路由规则
const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',components: {default: Home,homeView: Home}},{path: '/list',components: {listView: List}}]
})
// 对外暴露路由对象
export default router;

component 指定组件在默认的路由视图位置展示
components:Home
components指定组件在name为某个值的路由视图位置展示

components:{default:Home,// 默认路由视图位置homeView:Home// name为homeView的路由视图位置
}

4. main.js引入router配置

import { createApp } from 'vue'import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App);
//绑定路由对象!!!
app.use(router);
app.mount('#app')

result

二、路由重定向

重定向的作用：将一个路由重定向到另一个路由上

  • 修改案例：访问/list和/showAll都定向到List.vue
  • router.js
    • 定义routes : /showAll
    • 添加 redirect: '/list'
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'// 创建路由对象,声明路由规则
const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',components: {default: Home,homeView: Home}},{path: '/list',components: {listView: List}},{path: '/showAll',// 重定向redirect: '/list'},{path: '/add',components: {addView: Add}},{path: '/update',components: {updateView: Update}}]
})
// 对外暴露路由对象
export default router;
  • App页面 显示
    • 点击show 也是list页面
<script setup>
</script><template><div><h1>App页面</h1><hr /><!-- 路由的连接 --><router-link to="/">home页</router-link><br /><router-link to="/list">list页</router-link><br /><router-link to="/showAll">showAll页 重定向到list</router-link><br /><router-link to="/add">add页</router-link><br /><router-link to="/update">update页</router-link><br /><!-- 路由连接对应视图的展示位置 --><hr />默认展示位置:<router-view></router-view><hr />Home视图展示:<router-view name="homeView"></router-view><hr />List视图展示:<router-view name="listView"></router-view><hr />Add视图展示:<router-view name="addView"></router-view><hr />Update视图展示:<router-view name="updateView"></router-view><hr /></div>
</template><style scoped>
</style>

router

三、编程式路由(useRouter)

普通路由

  • <router-link to="/list">list页</router-link>
  • 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)

编程式路由

  • 通过useRouter,动态决定向那个组件切换的路由
  • 在 Vue 3 和 Vue Router 4中，你可以使用 useRouter 来实现动态路由(编程式路由)
  • 这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。

案例需求:
通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签

  • App.vue
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
//创建动态路由对象
let router = useRouter();let routePath = ref("");
let showList = () => {// 编程式路由// 直接push一个路径//router.push('/list')// push一个带有path属性的对象router.push({ path: "/list" });
};
</script><template><div><h1>App页面</h1><hr /><!-- 路由的连接 --><router-link to="/">home页</router-link><br /><router-link to="/list">list页</router-link><br /><router-link to="/showAll">showAll页 重定向到list</router-link><br /><router-link to="/add">add页</router-link><br /><router-link to="/update">update页</router-link><br /><!-- 动态输入路径,点击按钮,触发单击事件的函数,在函数中通过编程是路由切换页面 --><button @click="showList()">showList</button><br /><!-- 路由连接对应视图的展示位置 --><hr />默认展示位置:<router-view></router-view><hr />Home视图展示:<router-view name="homeView"></router-view><hr />List视图展示:<router-view name="listView"></router-view><hr />Add视图展示:<router-view name="addView"></router-view><hr />Update视图展示:<router-view name="updateView"></router-view><hr /></div>
</template><style scoped>
</style>

vue

四、路由传参(useRoute)

路径参数

  • 在路径中使用一个动态字段来实现，我们称之为 路径参数
    • 例如： 查看数据详情 /showDetail/1 ,1就是要查看详情的id,可以动态添值！

键值对参数

  • 类似与get请求通过url传参,数据是键值对形式的

    • 例如: 查看数据详情/showDetail?hid=1,hid=1就是要传递的键值对参数

  • 在 Vue 3 和 Vue Router 4 中，你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象。

  • useRoute 方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、查询参数等。

案例需求 :
切换到ShowDetail.vue组件时,向该组件通过路由传递参数

  • 修改App.vue文件
<script setup>
import { useRouter } from "vue-router";
//创建动态路由对象
let router = useRouter();
//动态路由路径传参方法
let showDetail = (id, language) => {// 尝试使用拼接字符串方式传递路径参数//router.push(`showDetail/${id}/${languange}`)/*路径参数,需要使用params  */router.push({ name: "showDetail", params: { id: id, language: language } });
};let showDetail2 = (id, language) => {/*uri键值对参数,需要使用query */router.push({ path: "/showDetail2", query: { id: id, language: language } });
};
</script><template><div><h1>App页面</h1><hr /><!-- 路径参数   --><router-link to="/showDetail/1/JAVA">showDetail路径传参显示JAVA</router-link><button @click="showDetail(1,'JAVA')">showDetail动态路由路径传参显示JAVA</button><hr /><!-- 键值对参数 --><router-linkv-bind:to="{path:'/showDetail2',query:{id:1,language:'Java'}}">showDetail2键值对传参显示JAVA</router-link><button @click="showDetail2(1,'JAVA')">showDetail2动态路由键值对传参显示JAVA</button><hr />showDetail视图展示:<router-view name="showDetailView"></router-view><hr />showDetail2视图展示:<router-view name="showDetailView2"></router-view></div>
</template><style scoped>
</style>
  • 修改router.js增加路径参数占位符
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'// 导入vue组件import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'// 创建路由对象,声明路由规则
const router = createRouter({history: createWebHashHistory(),routes: [{/* 此处:id  :language作为路径的占位符 */path: '/showDetail/:id/:language',/* 动态路由传参时,根据该名字找到该路由 */name: 'showDetail',components: {showDetailView: ShowDetail}},{path: '/showDetail2',components: {showDetailView2: ShowDetail2}},]})// 对外暴露路由对象
export default router;
  • ShowDetail.vue 通过useRoute获取路径参数
<script setup>
import { useRoute } from "vue-router";
import { ref, onUpdated } from "vue";// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");//  借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {// 获取对象中的参数languageId.value = route.params.id;languageName.value = route.params.language;console.log(languageId.value);console.log(languageName.value);
});
</script><template><div><h1>ShowDetail页面</h1><h3>编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言</h3><h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3></div>
</template><style scoped>
</style>
  • ShowDetail2.vue通过useRoute获取键值对参数
<script setup type="module">
import { useRoute } from "vue-router";
import { onUpdated, ref } from "vue";
// 获取当前的route对象
let route = useRoute();
let languageId = ref(0);
let languageName = ref("");
//  借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() => {// 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)console.log(route.query);console.log(languageId.value);console.log(languageName.value);languageId.value = route.query.id;languageName.value = route.query.language;
});
</script><template><div><h1>ShowDetail2页面</h1><h3>编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言</h3><h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3></div>
</template><style scoped>
</style>

useRoute 函数用来接收参数
route.param 表示路径参数
route.query 表示键值对参数

1

五、路由守卫

  • 路由守卫是用于在路由切换期间进行一些特定任务的回调函数。
  • 路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。
  1. 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
  2. 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
  3. 守卫代码的位置: 在router.js中

…

总结

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

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

相关文章

正点原子--STM32中断系统学习笔记(2)

正点原子--STM32中断系统学习笔记(2)

引言 上篇帖子STM32中断系统学习笔记(1)是理论&#xff0c;这篇帖子开始实战&#xff0c;目标是通过按键实现LED的控制。 1.工程建立 以正点原子HAL库 实验1 跑马灯实验为基础&#xff0c;复制工程&#xff0c;在“Drivers--BSP”目录下建立EXTI文件夹&#xff0c;并创建ext…
阅读更多...
Spring Cloud Gateway 修改请求体、响应体

Spring Cloud Gateway 修改请求体、响应体

前言 例行每半年一次的工作轮换&#xff0c;接手了同事的网关服务 年底了工作不是很忙&#xff0c;看了下前人的代码&#xff0c;虽然都能读懂&#xff0c;但感觉应该可以再优雅一点 于是把网关的相关知识又翻阅了一下 官方资料 PS&#xff1a;这里如果按新方案调整的话&#…
阅读更多...
Windows - 防火墙 - 如何开启单个端口以供Web应用访问(以82端口为例) - 开启端口后还是访问失败了？

Windows - 防火墙 - 如何开启单个端口以供Web应用访问(以82端口为例) - 开启端口后还是访问失败了？

Windows - 防火墙 - 如何开启单个端口以供Web应用访问(以82端口为例) - 开启端口后还是访问失败了&#xff1f; 前言 在网上搜“防火墙开启某个端口”供其他机器访问&#xff0c;都是只讲到了“如何允许某个端口被访问”&#xff0c;而没有后续了。 我之前就遇到过这个问题&…
阅读更多...
数据据库八之 视图、触发器、事务

数据据库八之 视图、触发器、事务

【零】准备数据 【1】创建表 &#xff08;1&#xff09;部门表 d_id是部门的编号d_name是部门的名字 # 确保表不存在 drop table if exists department; # 创建表 create table department( d_id int auto_increment primary key, d_name varchar(6) )auto_increment 501 …
阅读更多...
STM32-GPIO输入——按键检测

STM32-GPIO输入——按键检测

1 软件设计 为了使程序更有条例&#xff0c;方便移植在“工程模板”之上新建“bsp_key.c”及“bsp_key.h”文件&#xff0c;这些文件也可根据您的喜好命名&#xff0c;这 些文件不属于STM32HAL库的内容&#xff0c;是由我们自己根据应用需要编写的 1.1 编程要点 1&#xff…
阅读更多...
2024-01-06-AI 大模型全栈工程师 - 机器学习基础

2024-01-06-AI 大模型全栈工程师 - 机器学习基础

摘要 2024-01-06 阴 杭州 晴 本节简介: a. 数学模型&算法名词相关概念; b. 学会数学建模相关知识&#xff1b; c. 学会自我思考&#xff0c;提升认知&#xff0c;不要只会模仿&#xff1b; 课程内容 1. Fine-Tuning 有什么作用&#xff1f; a. 什么是模型训练&#xff…
阅读更多...
Linux（一）

Linux（一）

目录结构 【在 Linux 世界里&#xff0c;一切皆文件】 linux 的文件系统是采用级层式的树状目录结构&#xff1b; 序号名称介绍备注1/&#xff1a;根目录一般根目录下只存放目录&#xff0c;在 linux 下有且只有一个根目录&#xff0c;所有的东西都是从这里开始&#xff1b; 当…
阅读更多...
机器学习1-种类及应用

机器学习1-种类及应用

机器学习主要包括以下几种主要的种类&#xff1a; 1. 监督学习&#xff08;Supervised Learning&#xff09; 在监督学习中&#xff0c;模型通过使用已标记的训练数据&#xff08;包括输入和对应的输出&#xff09;来学习预测目标变量。常见的任务包括回归和分类。应用&#xf…
阅读更多...
Docker进阶篇-Docker微服务实战

Docker进阶篇-Docker微服务实战

一、通过IDEA新建一个普通微服务模块 1、建Moduel <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation…
阅读更多...
Open CASCADE学习|曲面上一点的曲率及切平面

Open CASCADE学习|曲面上一点的曲率及切平面

曲率&#xff08;Curvature&#xff09;是一个几何学的概念&#xff0c;用于描述一个物体的形状在某一点上的弯曲程度。在我们日常生活中&#xff0c;曲率与我们的生活息息相关&#xff0c;如道路的弯道、建筑物的拱形结构、自然界的山脉等等。了解曲率的概念和计算方法&#x…
阅读更多...
开源软件，推动技术创新

开源软件，推动技术创新

文章目录 一、开源软件介绍二、推动技术创的影响力三、常见的开源软件四、应用案例五、存在安全风险 一、开源软件介绍 开源软件&#xff0c;也称为自由软件或公众可用的软件&#xff0c;是一种源代码公开的软件。与传统的商业软件不同&#xff0c;开源软件由社区驱动&#xf…
阅读更多...
Unity中开发程序打包发布

Unity中开发程序打包发布

添加ESC脚本 使用Unity打包发布的过程中&#xff0c;考虑到打开的程序会处于全屏界面&#xff0c;而此时我们又会有退出全屏的需求&#xff0c;因此需要添加ESC脚本&#xff0c;当我们单击ESC脚本的过程中&#xff0c;退出全屏模式。 在Assets/Scenes下&#xff0c;创建esc.cs…
阅读更多...
Python之PySpark简单应用

Python之PySpark简单应用

文章目录 一、介绍1.准备工作2. 创建SparkSession对象&#xff1a;3. 读取数据&#xff1a;4. 数据处理与分析&#xff1a;5. 停止SparkSession&#xff1a; 二、示例1.读取解析csv数据2.解析计算序列数据map\flatmap 三、问题总结1.代码问题2.配置问题 一、介绍 PySpark是Apa…
阅读更多...
Linux离线安装Telnet

Linux离线安装Telnet

前言&#xff1a;由于服务器部署在内网环境&#xff0c;不能yum安装 1.先从网站下载好我们所需要到的三个rpm包http://www.rpmfind.net/linux/rpm2html/search.php?queryxinetd&submitSearch...&system&arch image.png 三个依赖包分别是&#xff1a; -rw-r--r-- 1…
阅读更多...
Invicti Professional v24.1.0.43434

Invicti Professional v24.1.0.43434

新的安全检查 添加了对 dotCMS 的检查添加了对 Ultimate Member WordPress 插件的检查添加了新的 mXSS 模式添加了新签名来检测 JWK 改进 改进了针对 Weak Ciphers Enabled 漏洞的建议改进了对 swagger.json 漏洞的检测添加了对 AWS WAFv2 规则的支持改进了更多错误和警告消…
阅读更多...
探索Gin框架：Golang使用Gin完成文件上传

探索Gin框架：Golang使用Gin完成文件上传

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 前言 在之前的文章中&#xff0c;我们讲解了Gin框架的快速入门使用&#xff0c;今天我们来聊聊如何使用…
阅读更多...
golang的sqlite驱动不使用cgo实现 更换gorm默认的SQLite驱动

golang的sqlite驱动不使用cgo实现 更换gorm默认的SQLite驱动

golang的sqlite驱动不使用cgo实现 更换gorm默认的SQLite驱动 最近在开发一个边缘物联网程序时使用Golang开发&#xff0c;用到GORM来操作SQLite数据库&#xff0c;GORM默认使用gorm.io/driver/sqlite这个库作为SQLite驱动&#xff0c;该库用CGO实现&#xff0c;在使用过程中遇…
阅读更多...
OpenAI Gym 中级教程——多智能体系统

OpenAI Gym 中级教程——多智能体系统

Python OpenAI Gym 中级教程&#xff1a;多智能体系统 在强化学习中&#xff0c;多智能体系统涉及到多个智能体相互作用的情况。在本篇博客中&#xff0c;我们将介绍如何在 OpenAI Gym 中构建和训练多智能体系统&#xff0c;并使用 Multi-Agent Deep Deterministic Policy Gra…
阅读更多...
Unity_Shader

Unity_Shader

Unity_Shader 目录 Unity_Shader 带着问题开始： Shader Graph 开始吧！
阅读更多...
【NLP冲吖~】一、朴素贝叶斯（Naive Bayes）

【NLP冲吖~】一、朴素贝叶斯（Naive Bayes）

0、朴素贝叶斯法 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法。对于给定的训练数据集&#xff0c;首先基于特征条件独立假设学习输入输出的联合概率分布&#xff0c;然后基于此模型&#xff0c;对给定的输入 x x x&#xff0c;利用贝叶斯定理求出后验概率最大的…
阅读更多...
最新文章

Copyright @ 2022~2023