Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建

1、安装

npm install vue-router --registry=https://registry.npmmirror.com

2、配置路由模块

第一步:src/router/index.js创建文件

第二步:在src/view下面创建两个vue文件,一个叫Home.vue和About.vue

第三步:配置src/router/index.js文件

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About}å
]const router = createRouter({history: createWebHistory(),routes
})export default routes

3、main引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'createApp(App).use(router).mount('#app')

 4、使用路由

在App.vue文件中使用

<template><div><router-view></router-view></div>
</template>

5、页面按钮切换路由(一级路由)

路由组件<router-link to="/"></router-link>

<template><div><router-link to="/">首页</router-link>|<router-link to="/about">about</router-link><router-view></router-view></div>
</template><script setup>
</script><style scoped>
</style>

6、页面按钮切换路由(二级路由) 

 第一步:新建两个页面,一个Foo.vue和Bar.vue;

第二步:src/router/index.js文件里引入且配置

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import Bar from '../view/Bar.vue'
import Foo from '../view/Foo.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About,children: [{path: 'foo',component: Foo,},{path: 'bar',component: Bar,}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router

第三步:在About.vue文件中配置二级路由和跳转

<template><div>AboutViewı<div><router-link to="/about/foo">foo</router-link>|<router-link to="/about/bar">bar</router-link></div><router-view></router-view></div>
</template><script>export default {name: 'AboutView'}
</script><style scoped></style>

二、动态路由模式

 1、第一步:将foo的path改成/:id

2、第二步:修改about.vue跳转路由

3、第三步:可以在foo.vue文件内拿到动态路由传递过来的值

$route.params.id

三、编程路由模式

1、路由跳转代码:this.$router.push('地址')

四、命名路由

注意:除了path外,还可以为任何路由提供name

优点

1、没有硬编码的URL

2、params的自动编码/解码

3、防止在url中出现打字错误

1、在router.js中给路由添加name属性 

2、将router-link的to写成动态传值模式

 

五、命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示 

六、路由原信息 

注意:有时,可能希望将任何信息附加到路由上,如过度名称、谁可以访问路由等。这些事情可以通过接受属性对象的meta属性来实现。 

如何拿到meta内的值?

 

七、路由传参 

1、query方式(显示)

一、通过连接方式传递

 

 

结果: 

二、通过name方式传递

2、params方式(显示)动态路由

3、params方式(隐式)

注意:点击刷新时,传递数据会消失

八、route对象和router对象

1、 route对象

 注意:route是进行获取操作,对当前路由进行操作

2、router对象

 注意:route是进行设置操作, 对所有路由进行方法的集合

 九、路由守卫

注意:提供的导航守卫主要用来通过跳转或取消的方式守卫导航,守卫主要有全局的,单个路由独享的,或者组件级的。

to:跳转到哪一个url

form:从哪一个url来的

next:决定进入到文件内,还是跳转到其他组件

1、全局路由守卫

 2、单个路由独享守卫

3、 组件级守卫

 

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

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

相关文章

vue插件清除 所有console.log()

一、作用 1、提升性能console.log() 语句会消耗一定的性能&#xff0c;尤其是在频繁调用的情况下。在生产环境中移除这些语句可以提高应用的运行效率。 2、减少信息泄露console.log() 可以输出敏感信息&#xff08;如用户数据、API 响应等&#xff09;。在生产环境中&#xf…

vue项目中如何在路由变化时增加一个进度条

在 Vue.js 项目中&#xff0c;使用路由&#xff08;如 Vue Router&#xff09;时&#xff0c;为了提升用户体验&#xff0c;你可能会想要在路由变化时显示一个进度条。这可以通过多种方式实现&#xff0c;其中一种流行的做法是使用第三方库&#xff0c;如 vue-loading-bar 或 n…

python 模块和包、类和对象

模块 模块是包含 Python 代码的文件&#xff0c;通常用于组织相关的函数、类和其他语句。模块可以被导入并在其他 Python 文件中使用。 创建模块 假设你创建了一个名为 mymodule.py 的文件&#xff0c;内容如下&#xff1a; # mymodule.pydef greet(name): return f"…

图书管理系统汇报

【1A536】图书管理系统汇报 项目介绍1.用户登录注册功能1. 1用户角色管理2.图书管理功能2.1 添加图书2.2 编辑图书2.3 删除图书 3.图书搜索和筛选3.1 图书搜索3.2 图书筛选 4.图书借阅、图书归还4.1 图书借阅4.2 图书归还 5.用户信息管理5.1上传头像5.2修改头像5.3 修改密码 项…

执行Django项目的数据库迁移命令时报错:(1050, “Table ‘django_session‘ already exists“);如何破?

一、问题描述&#xff1a; 当我们写Django时&#xff0c;由于自己的操作不当&#xff0c;导致执行数据库迁移命令时报错&#xff0c;报错的种类有很多&#xff0c;例如&#xff1a; 迁移文件冲突&#xff1a;可能你有多个迁移文件试图创建同一个表。数据库状态与迁移文件不同…

蓝牙BLE开发——红米手机无法搜索蓝牙设备?

解决 红米手机&#xff0c;无法搜索附近蓝牙设备 具体型号当时忘记查看了&#xff0c;如果你遇到有以下选项&#xff0c;记得打开~ 设置权限

java设计模式之创建者模式(5种)

设计模式 软件设计模式&#xff0c;又称为设计模式&#xff0c;是一套被反复利用&#xff0c;代码设计经验的总结&#xff0c;他是在软件设计过程中的一些不断发生的问题&#xff0c;以及该问题的解决方案。 **创建者模式又分为以下五个模式&#xff1a;**用来描述怎么“将对象…

SpringSecurity框架(入门)

简介&#xff1a; Spring Security 是一个用于构建安全的 Java 应用程序的框架&#xff0c;尤其适用于基于Spring的应用程序。它提供了全面的安全控制&#xff0c;从认证&#xff08;Authentication&#xff09;到授权&#xff08;Authorization&#xff09;&#xff0c;以及…

广东网站设计提升你网站在搜索引擎中的排名

在当今网络盛行的时代&#xff0c;拥有一个设计优良的网站&#xff0c;对企业的在线发展至关重要。特别是对于广东地区的企业来说&#xff0c;网站设计不仅仅是美观的问题&#xff0c;更直接影响着搜索引擎中的排名。因此&#xff0c;精心策划和设计的网站&#xff0c;能够显著…

Cuebric:用AI重新定义3D创作的未来

一、简介 Cuebric 是一家成立于2022年夏天的好莱坞创新公司,致力于为电影、电视、游戏和时尚等行业提供先进的AI多模态SaaS平台。自2024年1月正式推出以来,Cuebric 已经在市场上获得了广泛的认可和积极的反馈。目前,该平台正处于1.0版本的beta测试阶段,已募集约50万美元的…

计算机的错误计算(一百四十)

摘要 探讨 MATLAB 中函数 的计算精度。 从计算机的错误计算&#xff08;一百三十九&#xff09;知&#xff0c;对于对数运算&#xff0c;当真数在 1 附近时&#xff0c;计算机的输出会出现较大误差。为此&#xff0c;IEEE 754-2019 中专门定义有函数 其目的就是当自变量在 …

《Python游戏编程入门》注-第4章2

《Python游戏编程入门》的“4.2.2 键盘事件”中介绍了通过键盘事件来监听键盘按键的方法。 1 键盘事件 玩家点击键盘中某个按键实际上包含了两个动作&#xff1a;点击按键和释放按键&#xff0c;也就是按键按下和松开。按键按下的对应的事件是KEYDOWN&#xff0c;按键松开对应…

《高频电子线路》 —— 高频谐振功放(2)

动态特性与负载特性 动态特性 静态特性是指&#xff0c;不考虑负载阻抗的时候获得的&#xff0c;即转移特性曲线和输出特性曲线。 考虑负载时&#xff0c;电流变化的时候&#xff0c;负载上的电压就会变化&#xff0c;管子上面的Vce也会变化。 考虑负载的反作用后&#xff0c…

SpringBoot 下的Excel文件损坏与内容乱码问题

序言 随着打包部署的方式的改变&#xff0c;原本正常运行的代码可能带来一些新的问题&#xff0c;比如我们现在使用SpringBoot 的方式生成Jar包直接运行&#xff0c;就会对我们再在Resource下的Excel文件产生影响&#xff0c;导入与预期不符的情况发生cuiyaonan2000163.com 比…

「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。 关键词 Image 组件图片加载本地资源远程图片图片轮播一、Image 组件基础…

上海亚商投顾:沪指缩量调整 华为概念股午后爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 市场全天震荡调整&#xff0c;沪指、深成指午后跌超1%&#xff0c;创业板指一度跌逾2%&#xff0c;尾盘跌幅有…

vim命令及shell命令

目录 vim命令 vim三种工作模式 光标的跳转 复制粘贴 剪切删除 撤销回滚替换 翻页 其他 shell编程命令 判断用户的参数 可用的整数比较运算符 常见的字符串比较运算符 if条件测试语句 for条件循环语句 vim命令 vim三种工作模式 Vim编辑器中设置了三种模式: 命令…

Z 检验和 T 检验之间的区别

目录 一、说明 二、什么是假设检验&#xff1f; 三、假设检验基础 3.1 假设检验的基本概念 3.2 、执行假设验证的步骤 3.3 临界值、P 值 3.4 方向假设 3.5 非方向假设检验s 四、什么是 Z 检验统计量&#xff1f; 五、Z 检验示例 5.1 单样本 Z 检验 5.2 双样本 Z 检…

Qt限制QGraphicsScene QGraphicsItem内部的移动范围

用过QGraphicsView的都知道&#xff0c;原点一般设定在view和item的中心&#xff0c;所以帮助文档和这个网友说的不一定跟我们对的上&#xff1a; 关于Qt限制QGraphicsScene内部Item的移动范围_qgraphicsitem限制移动范围-CSDN博客 首先&#xff0c;设定view的scenerect&…

【Redis】浅析Redis大Key

目录 1、什么是Redis大Key 2、大 Key 是怎么产生的 3、大 Key 导致的问题 4、如何快速找到 Redis 大 Key 5、大 Key 优化策略 6、总结 我们在使用 Redis 的过程中&#xff0c;如果未能及时发现并处理 Big keys&#xff08;下文称为“大Key”&#xff09;&#xff0c;可能…