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; 

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

相关文章

  • Vue3和Vue2的slot-scope插槽用法解读

    Vue3和Vue2的slot-scope插槽用法解读

    这篇文章主要介绍了Vue3和Vue2的slot-scope插槽用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue悬浮表单复合组件开发详解

    vue悬浮表单复合组件开发详解

    这篇文章主要为大家详细介绍了vue悬浮表单复合组件开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue header组件开发详解

    Vue header组件开发详解

    本篇文章主要介绍了Vue header组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解如何在vue中使用sass

    详解如何在vue中使用sass

    本篇文章主要介绍了详解如何在vue中使用sass,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • vue实现长图垂直居上 vue实现短图垂直居中

    vue实现长图垂直居上 vue实现短图垂直居中

    这篇文章主要为大家详细介绍了vue弹性布局实现长图垂直居上,vue实现短图垂直居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue双向绑定实现原理与方法详解

    Vue双向绑定实现原理与方法详解

    这篇文章主要介绍了Vue双向绑定实现原理与方法,结合实例形式详细分析了发布者-订阅者模式、脏值检查、数据劫持与双向绑定相关实现技巧,需要的朋友可以参考下
    2020-05-05
  • vue.js将时间戳转化为日期格式的实现代码

    vue.js将时间戳转化为日期格式的实现代码

    这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue require.context()的用法实例详解

    vue require.context()的用法实例详解

    require.context是webpack提供的一个api,通常用于批量注册组件,下面这篇文章主要给大家介绍了关于vue require.context()用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue中引入图片的方法示例

    vue中引入图片的方法示例

    在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢?下面这篇文章主要给大家介绍了关于vue中引入图片的方法,需要的朋友可以参考下
    2023-06-06

最新评论