【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…
阅读更多...
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 …
阅读更多...
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; 当…
阅读更多...
Open CASCADE学习|曲面上一点的曲率及切平面

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

曲率&#xff08;Curvature&#xff09;是一个几何学的概念&#xff0c;用于描述一个物体的形状在某一点上的弯曲程度。在我们日常生活中&#xff0c;曲率与我们的生活息息相关&#xff0c;如道路的弯道、建筑物的拱形结构、自然界的山脉等等。了解曲率的概念和计算方法&#x…
阅读更多...
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;今天我们来聊聊如何使用…
阅读更多...
element-ui button 仿写 demo

element-ui button 仿写 demo

基于上篇 button 源码分享写了一个简单 demo&#xff0c;在写 demo 的过程中&#xff0c;又发现了一个小细节&#xff0c;分享一下&#xff1a; 1、组件部分&#xff1a; <template><buttonclass"yss-button"click"handleClick":class"[ty…
阅读更多...
STM32目录结构

STM32目录结构

之前一直头疼的32目录&#xff0c;比51复杂&#xff0c;又没有C规律&#xff0c;也不像python脚本文件关联不强&#xff0c;也不像工整的FPGA工程&#xff0c;编的时候到处放&#xff0c;爆出的错千奇百怪。短暂整理了一个&#xff0c;还是没有理得很轻。 startup_stm32f10x_m…
阅读更多...
基于python+django，我开发了一款药店信息管理系统

基于python+django，我开发了一款药店信息管理系统

功能介绍 平台采用B/S结构&#xff0c;后端采用主流的Python语言进行开发&#xff0c;前端采用主流的Vue.js进行开发。 功能包括&#xff1a;药品管理、分类管理、顾客管理、用户管理、日志管理、系统信息模块。 代码结构 server目录是后端代码web目录是前端代码 部署运行…
阅读更多...
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(十六)

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(十六)

商家端订单管理模块 1. 订单搜索1.1 需求分析和设计1.2 代码实现1.2.1 admin/OrderController1.2.2 OrderService1.2.3 OrderServiceImpl 2. 各个状态的订单数量统计2.1 需求分析和设计2.2 代码实现2.2.1 admin/OrderController2.2.2 OrderService2.2.3 OrderServiceImpl2.2.4 …
阅读更多...
浅谈UI自动化测试

浅谈UI自动化测试

为了让对自动化技术感兴趣的朋友们有真实案例的支持&#xff0c;今天我们给大家带来一期适合新手的UI自动化测试介绍。我们的目标是让大家能够轻松理解UI自动化测试的概念&#xff0c;并且能够亲自动手去实践。通过这个介绍&#xff0c;大家能够对UI自动化测试有一个整体的理解…
阅读更多...
【Linux C | I/O模型】Unix / Linux系统的5种IO模型 | 图文详解

【Linux C | I/O模型】Unix / Linux系统的5种IO模型 | 图文详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
2016年苏州大学837复试机试C/C++

2016年苏州大学837复试机试C/C++

2016年苏州大学复试机试 第一题 题目 公鸡5元一只&#xff0c;母鸡3元一只&#xff0c;幼鸡1元3只。若100元钱买了100只鸡&#xff0c;问其中公鸡、母鸡、幼鸡各多少只&#xff1f; 博主注&#xff1a;此题经典百元买百鸡问题&#xff0c;出自&#xff1a;公元5世纪末&#…
阅读更多...
模拟钉钉官网动画

模拟钉钉官网动画

实现思路&#xff1a;利用粘性定位sticky&#xff0c;以及滚动事件实现。首先我们应该设置滚动动画开始位置和结束位置 &#xff0c;然后根据位置计算透明度或者transform&#xff0c;scale的值。 首先根据上述图线计算属性值&#xff0c;代码如下&#xff1a; function creat…
阅读更多...
PHP漏洞查询

PHP漏洞查询

CVE - Search CVE List (mitre.org) 美国国家漏洞数据库&#xff08;需要梯子&#xff09; NATIONAL VULNERABILITY DATABASE NVD - Search and Statistics (nist.gov) 基本都能查询到&#xff0c;传结果详情页里面会有一些解决方案的连接 PHP的官方网站 PHP :: Bugs :: Se…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023