您好,登录后才能下订单哦!
这篇“vue3中router路由及vuex的store如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中router路由及vuex的store如何使用”文章吧。
<script> import { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() // 组件内路由 const route = useRoute() // 组件内路由信息 } } </script>
创建store
import { createStore } from 'vuex' import login from './login' const store = createStore({ state: {}, mutations: {}, actions: {}, modules: { login } }) export default store
组件内使用store
<script> import { useStore } from 'vuex' export default { setup() { const store = useStore() const state = store.state const methods = { // 处理commit handleMutation: () => { store.commit(...) }, // 处理dispatch handleAction: () => { store.dispatch(...) } } return { ...methods } } } </script>
因为在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对象
企业开发中在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>
企业开发中在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>
撤销: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
以上就是关于“vue3中router路由及vuex的store如何使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。