vue如何在store仓库中使用路由

 更新时间:2022年03月30日 15:32:02   作者:吴冬雪~  
这篇文章主要介绍了vue如何在store仓库中使用路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在store仓库中使用路由

在仓库中,this的指向指的是store,但是在一般的工程,我们有可能会需要在仓库中走路由等逻辑,这个时候就需要先找到全局vue,因为路由是vue的一个子模块

main.js

window.Vue = vue
const vue = new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})
window.Vue = vue
export default vue

store/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; 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决

    SyntaxError: /xx.vue: Unexpected token, expected “,“错误解

    这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 一文详解vue各种权限控制与管理实现思路

    一文详解vue各种权限控制与管理实现思路

    这篇文章主要为大家介绍了vue各种权限控制与管理的实现思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue 不使用select实现下拉框功能(推荐)

    vue 不使用select实现下拉框功能(推荐)

    这篇文章主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用,需要的朋友可以参考下
    2018-05-05
  • 一篇超详细的Vue-Router手把手教程

    一篇超详细的Vue-Router手把手教程

    这篇文章主要给大家介绍了关于Vue-Router的相关资料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • vue调用语音播放的方法

    vue调用语音播放的方法

    这篇文章主要为大家详细介绍了vue调用语音播放的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • electron最小化托盘设置

    electron最小化托盘设置

    本文主要介绍了electron最小化托盘设置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue使用vue-drag-resize生成悬浮拖拽小球

    Vue使用vue-drag-resize生成悬浮拖拽小球

    这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • VUE3+Element-plus中el-form的使用示例代码

    VUE3+Element-plus中el-form的使用示例代码

    这篇文章主要介绍了VUE3+Element-plus中el-form的使用示例代码,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    本文通过实例代码给大家详细介绍了vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper的相关知识,需要的朋友可以参考下
    2018-05-05
  • Vue页面切换和a链接的本质区别详解

    Vue页面切换和a链接的本质区别详解

    今天小编就为大家分享一篇Vue页面切换和a链接的本质区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论