vue3中使用route、router、store的方式

这篇具有很好参考价值的文章主要介绍了vue3中使用route、router、store的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

route:

 (1) vue3写法:

import { useRoute } from "vue-router";

let route = useRoute();

route.query;
route.params;

 (2) vue2写法:

import { getCurrentInstance } from "vue";

let { proxy: this_ }: any = getCurrentInstance();

this_.$route.query;
this_.$route.params;

 router:

 (1) vue3写法:

import { useRouter } from "vue-router";

let router = useRouter();

router.push("/home");
router.replace("/home");
router.go(1);

 (2) vue2写法:

import { getCurrentInstance } from "vue";

let { proxy: this_ }: any = getCurrentInstance();

this_.$router.push("/home");
this_.$router.replace("/home");
this_.$router.go(1);

 store:

 (1) vue3写法:

import { useStore} from "vuex";

let store= useStore();

store.state.list;
store.commit("getList",res.data);
store.dispatch("getList",res.data);
store.getters.getList;

 (2) vue2写法:文章来源地址https://www.toymoban.com/news/detail-541193.html

import { getCurrentInstance } from "vue";

let { proxy: this_ }: any = getCurrentInstance();

this_.$store.state.list;
this_.$store.commit("getList",res.data);
this_.$store.dispatch("getList",res.data);
this_.$store.getters.getList;

到了这里,关于vue3中使用route、router、store的方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】13-前端路由-Vue-Router的详解: 从入门到掌握

    路由其实是网络工程中的一个术语: 在 架构一个网络 时,非常重要的两个设备就是 路由器和交换机 。 当然,目前在我们生活中 路由器 也是越来越被大家所熟知,因为我们生活中都会用到 路由器 : 事实上, 路由器 主要维护的是一个 映射表 ; 映射表 会决定数据的流向; 路由

    2024年02月09日
    浏览(36)
  • vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

    vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 route和router的写法 setup的两种用法 rules中校验之blur和change 1、写法一 index.vue 2、写法二完整版 index.vue 2、校验文件 srcutilsvalidate.ts

    2024年02月05日
    浏览(30)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(52)
  • vue进阶-vue-route中 this.$router 与 this.$route 的区别

    通过上章 📖vue进阶-vue-route 学习,我们发现路由的设置和获取会用到 this.$router 和 this.$route ,容易混淆,本章做下区分。 ✨ this.$router :访问 路由器 。是一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push() 、 replace() 、 go() 等

    2024年02月16日
    浏览(38)
  • Vue3 store+pinia 基本使用

    pinia是一个 状态管理的库 ,用于 跨组件、页面进行状态共享 (这和Vuex、Redux一样),用起来像组合式API Pinia和Vuex有什么区别 1、PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法; 2、最终,团队意识到Pinia已经实现了Vuex5中大部分内

    2024年02月07日
    浏览(43)
  • 【Vue框架】 router和route是什么关系

    之前没太注意,写着写着突然发现它们貌似不太一样,记录以下,回顾的看总结就好。 route :当前激活路由的对象,用于访问和操作当前路由的信息 router :管理多个 route 的对象,整个应用的路由管理 router 是Vue Router的实例,它管理着应用程序的路由。它负责监听URL的变化,

    2024年02月11日
    浏览(34)
  • Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块

    提示:文章内容仔细看一些,或者直接粘贴复制,效果满满 提示:文章大概 1、项目:前后端分离 2、前端:基于Vite创建的Vue3项目 3、后端:没有,模拟的后端数据 4、关于路径“@”符号——vite.config.js 文件里修改 提示:以下是本篇文章正文内容,下面案例可供复制粘贴使用

    2024年02月02日
    浏览(38)
  • Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

    参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles,并存入sessionStorage中,具体是在login页面实现,还是在menu页面实现都可以。在menu页面实现,可以显得登陆快一些。 2、编写router.js,注意,一个用户可能有多个角色。 这里有个bug 我们的roles存在sessionStorage中,关闭

    2024年02月13日
    浏览(36)
  • 路由,vue-router的基本用法,vue-router的常见用法$route.params、$router.push、$router.replace、$router.go

    路由(英文: router)就是 对应关系 。 SPA指的是一个web网站只有唯一的一个HTML页面, 所有组件的展示与切换 都在这唯一的一个页面内完成。此时, 不同组件之间的切换 需要通过 前端路由 来实现。 *结论:*在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成! 通俗

    2024年01月16日
    浏览(39)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包