vue3中router路由以及vuex的store使用解析

更新時間：2022年03月30日 11:51:13 作者：時光在等一個人

這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3 router路由及vuex store使用

1.路由

<script>
import { useRouter, useRoute } from 'vue-router'
export default {
? setup() {
? ? const router = useRouter() // 組件內(nèi)路由
? ? const route = useRoute() // 組件內(nèi)路由信息
? }
}
</script>

2.vuex

創(chuàng)建store

import { createStore } from 'vuex'
import login from './login'
const store = createStore({
? state: {},
? mutations: {},
? actions: {},
? modules: {
? ? login
? }
})
export default store

組件內(nèi)使用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中router路由和vuex的store使用,獲取對象基本使用

vue3中router和store使用方法

因為在vue3的setup內(nèi)不能使用this對象，所有所有直接通過this來訪問的方法都不能使用了。

那么在vue3中怎么訪問this.r o u t e r 或者 t h i s . router 或者 this.router或者this.route呢？

記住一條規(guī)則：vue3中基本上所有通過this來訪問的對象都換成useXxx的方式來獲取。

比如說router，可以通過useRouter和 useRoute來獲取router，route對象

1、企業(yè)開發(fā)Router全局配置

企業(yè)開發(fā)中在src/router/index.js中全局配置，并在main.js中添加到Vue對象

import { createRouter, createWebHistory } from "vue-router";
// 路由規(guī)則
const routes = [
? {
? ? path: "/",
? ? name: "主頁",
? ? meta: ["istabbar"],
? ? component: () => import("../views/Home.vue"),
? },
];
//根據(jù)路由規(guī)則創(chuàng)建路由
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引入
// 創(chuàng)建VUE對象
createApp(App)
? .use(router) // 使用.use(router)添加路由router
? .mount("#app");

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

1.1、Router獲取及使用

先引入vue-router，再獲取對象：

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

但是這也不是唯一的方法，傳統(tǒng)的和VUE3的使用方法如下：

這里提供了三種方法用于獲取 router 對象

<template>
? <div class="page">
? ? 因為在setup內(nèi)部沒有this訪問權(quán)限，不能直接使用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對應(yīng)的方法使用大全
? ? // ------------------------------------------------------
? ? // router1.addRoute(parentOrRoute, route)
? ? // router1.afterEach(回調(diào)函數(shù))
? ? // router1.back() 等價于 go(-1)
? ? // router1.beforeEach(回調(diào)函數(shù))
? ? // router1.beforeResolve(回調(diào)函數(shù))
? ? // router1.currentRoute 獲取當(dāng)前路由：如： {_rawValue: {…}, _shallow: true, __v_isRef: true, _value: {…}}
? ? // router1.forward() 等價于 go(1)
? ? // router1.getRoutes: ? getRoutes()
? ? // router1.go(delta) 等價于 routerHistory.go(delta) 跳到指定歷史記錄
? ? // router1.hasRoute(name) 判斷是否有對應(yīng)的路由
? ? // router1.isReady() 判斷路由是否準(zhǔn)備跳轉(zhuǎn)
? ? // router1.onError(回調(diào)函數(shù)) 當(dāng)發(fā)生錯誤的時候執(zhí)行的
? ? // router1.options 獲取所有路由信息 {history: {…}, routes: Array(5)}
? ? // router1.push(to) 跳轉(zhuǎn)到指定路由對應(yīng)的頁面，有歷史記錄
? ? // router1.removeRoute(name) 動態(tài)的刪除某個路由
? ? // router1.replace(to) 直接跳轉(zhuǎn)到指定路由頁面，沒有歷史記錄
? ? // router1.resolve(rawLocation, currentLocation) ?可以自定義跳轉(zhuǎn)參數(shù)的方法
? ? return {};
? },
? mounted() {
? ? // 第三種方法：獲取路由對象 router 的方法3
? ? console.log(this.$router);
? },
};
</script>

1.2、Route獲取及使用

先引入vue-router，再獲取對象：

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

但是這也不是唯一的方法，傳統(tǒng)的和VUE3的使用方法如下：

這里提供了三種方法用于獲取 router 對象

<template>
? <div class="page">
? ? 因為在setup內(nèi)部沒有this訪問權(quán)限，不能直接使用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對應(yīng)的屬性使用大全
? ? // ------------------------------------------------------
? ? // fullPath: "/user" ?完整路由路徑
? ? // hash: "" 錨點部分
? ? // href: "/user" ?跳轉(zhuǎn)來的時候的路徑
? ? // matched: [{…}] ? 路由匹配日規(guī)則數(shù)組
? ? // meta: {0: "istabbar"} ?路由附加的元數(shù)據(jù)
? ? // name: "個人中心" 路由的名稱
? ? // params: {} ? 路由跳轉(zhuǎn)時帶過來的附加參數(shù)，如果是對象需要轉(zhuǎn)換成JSON格式
? ? // path: "/user" ?編碼 URL 的 pathname 部分，與路由地址有關(guān)
? ? // query: {} ? 地址附帶的參數(shù)
? ? // redirectedFrom: undefined ?重定向跳轉(zhuǎn)過來之前的地址，如果沒有重定向，則為 undefined。
? ? return {};
? },
? mounted() {
? ? // 第三種方法：獲取路由對象 router 的方法3
? ? console.log(this.$route);
? },
};
</script>

2、企業(yè)開發(fā)Store全局配置

企業(yè)開發(fā)中在src/store/index.js中全局配置，并在main.js中添加到Vue對象

import { createStore } from "vuex";
//創(chuàng)建存儲對象
export default createStore({
? // 需要存儲的值都放在這里面
? state() {
? ? return {
? ? ? count: 0,?? ?// 在視圖中通過$store.state.count來獲取
? ? };
? },
? // 在其他視圖中通過 $store.commit('setState', 10) 使用，用于修改stor存的值
? mutations: {
? ? setState(state, count) {?? ?// 只能接受兩個參數(shù)，用于修改store存的值
? ? ? state.count = count;
? ? },
? },
? // 相當(dāng)于組件的計算屬性 通過 $store.getters.doubleCount 獲取計算后的值
? getters: {
? ? doubleCount(state) {
? ? ? return state.count * 2;
? ? },
? },
? // 異步任務(wù) 不會改變state 通過 $store.dispath('doubleCount') 使用
? actions: {
? ? doubleCount(context) {
? ? ? context.commit("doubleCount");
? ? },
? },
? // store的下級store 方便大型項目復(fù)雜數(shù)據(jù)管理，這里面相當(dāng)于可以在放置一個和外面這些一樣的模塊
? modules: {},
});

在main.js中添加到Vue對象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
import store from "./store"; // 添加全局存儲vuex引入
// 創(chuàng)建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內(nèi)部沒有this訪問權(quán)限，不能直接使用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 對應(yīng)的屬性使用大全
? ? // ------------------------------------------------------
? ? // commit(type, payload, options2) 在其他視圖中使用mutations中定義的方法
? ? // dispatch(type, payload) 異步任務(wù) 不會改變state 在其他視圖中使用actions中定義的方法
? ? // getters: {} ?相當(dāng)于組件的計算屬性 通過 $store.getters.doubleCount 獲取計算后的值
? ? // state: (...) ?store中存儲的值，就是通過這個在視圖中獲取store存儲的值
? ? return {};
? },
? mounted() {
? ? // 第三種方法：獲取路由對象 store的方法3
? ? console.log(this.$store);
? },
};
</script>