本文详细讲解了Vue3中如何在企业开发环境中全局配置Router和Store，包括如何在setup中正确使用useRouter和useStore获取对象，以及它们各自的方法和属性。涵盖了关键操作和实例演示。
vue3中router路由和vuex的store使用方法，获取对象基本使用详细教程
绝对精华，绝对值得珍藏，看完感谢点赞，谢谢
vue3中router和store使用方法
因为在vue3的setup内不能使用this对象，所有所有直接通过this来访问的方法都不能使用了。
那么在vue3中怎么访问this.
r
o
u
t
e
r
或
者
t
h
i
s
.
router 或者 this.
router或者this.route呢？
记住一条规则：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)添加路由router
.mount("#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 的方法1
const vue = getCurrentInstance();
const router1 = vue.ctx.$router;
// 第二种方法：获取路由对象 router 的方法2
const 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)
// router1.getRoutes: ƒ getRoutes()
// router1.go(delta) 等价于 routerHistory.go(delta) 跳到指定历史记录
// router1.hasRoute(name) 判断是否有对应的路由
// router1.isReady() 判断路由是否准备跳转
// router1.onError(回调函数) 当发生错误的时候执行的
// router1.options 获取所有路由信息 {history: {…}, routes: Array(5)}
// router1.push(to) 跳转到指定路由对应的页面，有历史记录
// router1.removeRoute(name) 动态的删除某个路由
// router1.replace(to) 直接跳转到指定路由页面，没有历史记录
// router1.resolve(rawLocation, currentLocation) 可以自定义跳转参数的方法
return {};
},
mounted() {
// 第三种方法：获取路由对象 router 的方法3
console.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 的方法1
const vue = getCurrentInstance();
const route1 = vue.ctx.$router.currentRoute.value;
console.log(route1);
// 第二种方法：获取路由对象 router 的方法2
const 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 的方法3
console.log(this.$route);
},
};
</script>
2、企业开发Store全局配置
企业开发中在src/store/index.js中全局配置，并在main.js中添加到Vue对象
import { createStore } from "vuex";
//创建存储对象
export default createStore({
// 需要存储的值都放在这里面
state() {
return {
count: 0, // 在视图中通过$store.state.count来获取
};
},
// 在其他视图中通过 $store.commit('setState', 10) 使用，用于修改stor存的值
mutations: {
setState(state, count) { // 只能接受两个参数，用于修改store存的值
state.count = count;
},
},
// 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
getters: {
doubleCount(state) {
return state.count * 2;
},
},
// 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用
actions: {
doubleCount(context) {
context.commit("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)添加全局存储vuex
.mount("#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 的方法1
const vue = getCurrentInstance();
const store1 = vue.ctx.$store;
console.log(store1);
// 第二种方法：获取路由对象 router 的方法2
const store2 = useStore();
console.log(store2);
// 下面提供了：store 对应的属性使用大全
// ------------------------------------------------------
// commit(type, payload, options2) 在其他视图中使用mutations中定义的方法
// dispatch(type, payload) 异步任务 不会改变state 在其他视图中使用actions中定义的方法
// getters: {} 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
// state: (...) store中存储的值，就是通过这个在视图中获取store存储的值
return {};
},
mounted() {
// 第三种方法：获取路由对象 store的方法3
console.log(this.$store);
},
};
</script>
推荐
Java企业开发全套系列教程价值19800元：2021新版Java零基础新手速学教程网络编程多线程面向接口项目实战
功能快捷键
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
扫一扫
7390
到【灌水乐园】发言
