溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
