vue如何在store倉庫中使用路由
更新時(shí)間：2022年03月30日 15:32:02 作者：吳冬雪~
這篇文章主要介紹了vue如何在store倉庫中使用路由，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
在store倉庫中使用路由
在倉庫中，this的指向指的是store，但是在一般的工程，我們有可能會需要在倉庫中走路由等邏輯，這個(gè)時(shí)候就需要先找到全局vue，因?yàn)槁酚墒莢ue的一個(gè)子模塊
main.js
window.Vue = vue
const vue = new Vue({
? el: '#app',
? store,
? router,
? render: h => h(App)
})
window.Vue = vue
export default vuestore/index.js
const _router = window.Vue.$router
actions: {
? ? getResourcesAsync ({commit}, path) {
? ? ? const _router = window.Vue.$router
? ? ? Vue.prototype.axios.post('/services/vp/motorcateUser/companyRoleResources/myResources', {})
? ? ? ? .then((res) => {
? ? ? ? ? if (res.code === 200) {
? ? ? ? ? ? let resource = res.result
? ? ? ? ? ? var urList = steamroller(resource)
? ? ? ? ? ? var externalBtns = []
? ? ? ? ? ? var ownBtns = []
? ? ? ? ? ? sessionStorage.setItem('externalBtns', JSON.stringify(externalBtns))
? ? ? ? ? ? sessionStorage.setItem('ownBtns', JSON.stringify(ownBtns))
? ? ? ? ? ? commit('SET_RESOURCE', JSON.stringify(resource || {}))
? ? ? ? ? ? if (path) {
? ? ? ? ? ? ? if (urList.filter(item => item.granted && item.menuCode === path).length) {
? ? ? ? ? ? ? ? const currentRoute = urList.filter(item => item.granted && item.menuCode === window.Vue.$route.name)
? ? ? ? ? ? ? ? if (currentRoute.length) {
? ? ? ? ? ? ? ? ? _router.go(0)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? _router.replace({name: 'concat'})
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? _router.replace({name: 'concat'})
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? } else {
? ? ? ? ? ? Vue.prototype.$message({
? ? ? ? ? ? ? message: res.message,
? ? ? ? ? ? ? type: 'info'
? ? ? ? ? ? })
? ? ? ? ? ? sessionStorage.removeItem('czb-sign-token')
? ? ? ? ? ? sessionStorage.removeItem('czb-sign-info')
? ? ? ? ? }
? ? ? ? }).catch(() => {
? ? ? ? ? sessionStorage.removeItem('czb-sign-token')
? ? ? ? ? sessionStorage.removeItem('czb-sign-info')
? ? ? ? })
? ? }
? }在js文件中使用vue的router和store
在js文件中引入vue的路由配置文件 或者 store文件
import store from '../store';
import router from '../router';
//直接使用即可
router.push({'path': '/'})
store.state.XXX;?以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了如何構(gòu)建一個(gè)Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下2020-10-10
vue項(xiàng)目base64轉(zhuǎn)img方式
這篇文章主要介紹了vue項(xiàng)目base64轉(zhuǎn)img方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來)
這篇文章主要介紹了uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue中路由參數(shù)傳遞遇到的坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關(guān)于Vue中this.$router和this.$route的區(qū)別及push()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了Vue祖孫組件如何實(shí)現(xiàn)傳值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問題和解決辦法
封裝一個(gè)組件時(shí),我使用到了v-for和v-if,它們在同一標(biāo)簽內(nèi),總是提示v-for循環(huán)出來的item在實(shí)例中沒有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級使用時(shí),v-if優(yōu)先級比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問題和解決辦法2024-07-07
Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10