首页 > 编程札记 > 编程

vue3中router路由配置和使用方法和vuex的store配置和使用方法，获取对象基本使用详细教程

阅读：评论：0

vue3中router路由和vuex的store使用方法，获取对象基本使用详细教程

vue3中router和store使用方法
- 1、企业开发Router全局配置
- 1.1、Router获取及使用
- 1.2、Route获取及使用
- 2、企业开发Store全局配置
- 2.1、Store获取及使用
推荐
- 功能快捷键

绝对精华，绝对值得珍藏，看完感谢点赞，谢谢

vue3中router和store使用方法

因为在vue3的setup内不能使用this对象，所有所有直接通过this来访问的方法都不能使用了。

那么在vue3中怎么访问this. r o u t e r 或者 t h i s . router 或者 this. router或者ute呢？

记住一条规则：vue3中基本上所有通过this来访问的对象都换成useXxx的方式来获取。

比如说router，可以通过useRouter和 useRoute来获取router，route对象

1、企业开发Router全局配置

企业开发中在src/router/index.js中全局配置，并在main.js中添加到Vue对象

import { createRouter, createWebHistory } from "vue-router";
// 路由规则
const routes = [{path: "/",name: "主页",meta: ["istabbar"],component: () => import("../views/Home.vue"),},
];
//根据路由规则创建路由
const router = createRouter({history: createWebHistory(""),routes,
});
export default router;

在main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
// 创建VUE对象
createApp(App).use(router) // 使用.use(router)添加路由unt("#app");

配置完后就可以全局使用了

1.1、Router获取及使用

先引入vue-router，再获取对象：

import { useRouter } from “vue-router”;
const router = useRouter();

但是这也不是唯一的方法，传统的和VUE3的使用方法如下：
这里提供了三种方法用于获取 router 对象

<template><div class="page">因为在setup内部没有this访问权限，不能直接使用this访问this.$router 或者this.$route。所有使用useRouter, useRoute来获取</div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {setup() {// 第一种方法：获取路由对象 router 的方法1const vue = getCurrentInstance();const router1 = $router;// 第二种方法：获取路由对象 router 的方法2const router2 = useRouter();// 下面提供了router对应的方法使用大全// ------------------------------------------------------// router1.addRoute(parentOrRoute, route)// router1.afterEach(回调函数)// router1.back() 等价于 go(-1)// router1.beforeEach(回调函数)// router1.beforeResolve(回调函数)// router1.currentRoute 获取当前路由：如： {_rawValue: {…}, _shallow: true, __v_isRef: true, _value: {…}}// router1.forward() 等价于 go(1)// Routes: ƒ getRoutes()// (delta) 等价于 (delta) 跳到指定历史记录// router1.hasRoute(name) 判断是否有对应的路由// router1.isReady() 判断路由是否准备跳转// Error(回调函数) 当发生错误的时候执行的// router1.options 获取所有路由信息 {history: {…}, routes: Array(5)}// router1.push(to) 跳转到指定路由对应的页面，有历史记录// veRoute(name) 动态的删除某个路由// place(to) 直接跳转到指定路由页面，没有历史记录// solve(rawLocation, currentLocation)  可以自定义跳转参数的方法return {};},mounted() {// 第三种方法：获取路由对象 router 的方法3console.log(this.$router);},
};
</script>

1.2、Route获取及使用

先引入vue-router，再获取对象：

import { useRouter } from “vue-router”;
const router = useRouter();

但是这也不是唯一的方法，传统的和VUE3的使用方法如下：
这里提供了三种方法用于获取 router 对象

<template><div class="page">因为在setup内部没有this访问权限，不能直接使用this访问this.$router 或者this.$route。所有使用useRouter, useRoute来获取</div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
export default {setup() {// 第一种方法：获取路由对象 router 的方法1const vue = getCurrentInstance();const route1 = $router.currentRoute.value;console.log(route1);// 第二种方法：获取路由对象 router 的方法2const route2 = useRoute();console.log(route2);// 下面提供了route对应的属性使用大全// ------------------------------------------------------// fullPath: "/user"  完整路由路径// hash: "" 锚点部分// href: "/user"  跳转来的时候的路径// matched: [{…}]   路由匹配日规则数组// meta: {0: "istabbar"}  路由附加的元数据// name: "个人中心" 路由的名称// params: {}   路由跳转时带过来的附加参数，如果是对象需要转换成JSON格式// path: "/user"  编码 URL 的 pathname 部分，与路由地址有关// query: {}   地址附带的参数// redirectedFrom: undefined  重定向跳转过来之前的地址，如果没有重定向，则为 undefined。return {};},mounted() {// 第三种方法：获取路由对象 router 的方法3console.log(this.$route);},
};
</script>

2、企业开发Store全局配置

企业开发中在src/store/index.js中全局配置，并在main.js中添加到Vue对象

import { createStore } from "vuex";
//创建存储对象
export default createStore({// 需要存储的值都放在这里面state() {return {count: 0,	// 在视图中通过$unt来获取};},// 在其他视图中通过 $storemit('setState', 10) 使用，用于修改stor存的值mutations: {setState(state, count) {	// 只能接受两个参数，用于修改store存的值unt = count;},},// 相当于组件的计算属性 通过 $s.doubleCount 获取计算后的值getters: {doubleCount(state) {unt * 2;},},// 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用actions: {doubleCount(context) {contextmit("doubleCount");},},// store的下级store 方便大型项目复杂数据管理，这里面相当于可以在放置一个和外面这些一样的模块modules: {},
});

在main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
import store from "./store"; // 添加全局存储vuex引入
// 创建VUE对象
createApp(App).use(router) // 使用.use(router)添加路由router.use(store) // 使用.use(store)添加全局存储unt("#app");

配置完后就可以全局使用了

2.1、Store获取及使用

先引入vuex，再获取对象：

import { useStore } from “vuex”;
const store = useStore();

这里提供了三种方法用于获取 router 对象

<template><div class="page">因为在setup内部没有this访问权限，不能直接使用this访问this.$router 或者this.$route。所有使用useRouter, useRoute来获取</div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {setup() {// 第一种方法：获取路由对象 router 的方法1const vue = getCurrentInstance();const store1 = $store;console.log(store1);// 第二种方法：获取路由对象 router 的方法2const store2 = useStore();console.log(store2);// 下面提供了：store 对应的属性使用大全// ------------------------------------------------------// commit(type, payload, options2) 在其他视图中使用mutations中定义的方法// dispatch(type, payload) 异步任务 不会改变state 在其他视图中使用actions中定义的方法// getters: {}  相当于组件的计算属性 通过 $s.doubleCount 获取计算后的值// state: (...)  store中存储的值，就是通过这个在视图中获取store存储的值return {};},mounted() {// 第三种方法：获取路由对象 store的方法3console.log(this.$store);},
};
</script>

vue3中router路由配置和使用方法和vuex的store配置和使用方法，获取对象基本使用详细教程