vue如何在store倉庫中使用路由
更新時(shí)間：2022年03月30日 15:32:02 作者：吳冬雪~
這篇文章主要介紹了vue如何在store倉庫中使用路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
在store倉庫中使用路由
在倉庫中，this的指向指的是store，但是在一般的工程，我們有可能會(huì)需要在倉庫中走路由等邏輯，這個(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)文章
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
一文詳解vue各種權(quán)限控制與管理實(shí)現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實(shí)現(xiàn)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue 不使用select實(shí)現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實(shí)現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue調(diào)用語音播放的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了electron最小化托盤設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VUE3+Element-plus中el-form的使用示例代碼
這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
詳解vue-cli 構(gòu)建項(xiàng)目 vue-cli請(qǐng)求后臺(tái)接口 vue-cli使用axios、sass、swiper
本文通過實(shí)例代碼給大家詳細(xì)介紹了vue-cli 構(gòu)建項(xiàng)目 vue-cli請(qǐng)求后臺(tái)接口 vue-cli使用axios、sass、swiper的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05
今天小編就為大家分享一篇Vue頁面切換和a鏈接的本質(zhì)區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11