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

原创已于 2023-07-09 02:04:36 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-07-09 02:03:06 首次发布

这篇文章介绍了Vue3和Vue2中处理路由、路由器和Vuex状态管理的不同写法。在Vue3中，使用`useRoute`获取路由信息，`useRouter`进行导航操作，而`useStore`用于Vuex的state访问、提交mutation和派发action。相比之下，Vue2中这些功能分别通过`$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写法：

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;