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

目录
  • 在store仓库中使用路由
  • 在js文件中使用vue的router和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; 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中全局路由守卫中替代this操作(this.$store/this.$vux)

    全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let vue = new Vue({ el: '#app', router, store, components: { App }, template: '<App/>

  • 在Vue中使用this.$store或者是$route一直报错的解决

    今天在引入路由参数和状态组件的时候发现一直报空找不到,但是我在控制台查看还能找得到 一直超费解,直到我在其他组件单独测试的时候又可以了 这是测试正常的 test1s : function(){ debugger var test1=this.$route.params.num; console.log(test1); return test1; } getRequest: (val)=> {//改变海黄学堂状态 debugger let thisRoute=this.$store.state.s

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • vue简单的store详解

    vue简单的store详解

    vue中的store最简单的应用就是全局存储了. 我这里使用了两个组件在相互跳转(Helloworld.vue和twopage.vue),前者是用来向store中放数据的,后者是从store取数据的. 首先需要安装vuex: npm install vuex --save : 因为要跳转所以少不了安装路由router:npm install vue-router --save 新建store文件夹在里面新建modules文件夹.getters.js.index.js: 在modules建myst

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

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

    目录 在store仓库中使用路由 在js文件中使用vue的router和store 在store仓库中使用路由 在仓库中,this的指向指的是store,但是在一般的工程,我们有可能会需要在仓库中走路由等逻辑,这个时候就需要先找到全局vue,因为路由是vue的一个子模块 main.js window.Vue = vue const vue = new Vue({   el: '#app',   store,   router,   render: h => h(App) }) window.Vu

  • vue中多路由表头吸顶实现的几种布局方式

    vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求, 一.先聊js. A.首先在vux可以这样设置. 1.在state文件中设置状态. techo:{ partsFixed:false, repairFixed:false, mateFixed:false, outRepairFixed:false }//吸顶状态 2.在action中commi

  • vue spa应用中的路由缓存问题与解决方案

    vue spa应用中的路由缓存问题与解决方案

    单页面应用中的路由缓存问题 通常我们在进行页面前后退时,浏览器通常会帮我们记录下之前滚动的位置,这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位.但是在现在愈发流行的SPA(single page application 单页面应用)中,当我们从父级页面打开子级页面,或者从列表页面进入详情页面,此时如果回退页面,会发现之前我们浏览的滚动记录没有了,页面被置顶到了最顶部,仿佛是第一次进入这个页面一样.这是因为在spa页面中的url与路由容器页面所对应,当页面路径与其发生不匹配时,该页面组件

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • vue动态添加store、路由和国际化配置方式

    目录 vue动态添加store,路由和国际化 vue动态添加store vue动态添加路由 vue动态加载国际化 前端项目中用vue-i18n实现国际化 在项目中安装国际化包的依赖 配置文件 异步方式引入,一次只加载一种国际化包 非异步步方式,每次加载所有的包 使用 切语言 vue动态添加store,路由和国际化 vue动态添加store 想写组件库?用这个吧 … // store module标准格式 import demo from '@/store/modules/demo' $store

  • vue 实现在函数中触发路由跳转的示例

    如下所示: <span @click="clickFn">点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue组件中使用路由方法

    vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板中设置路由出口的命令如下 7.实现添加组件步骤如下 8.把组件添加到路由表的操作步骤如下 以上8点就是关于vue组件中使用路由的步骤,感谢大家对我们的支持.

  • Laravel 如何在blade文件中使用Vue组件的示例代码

    Laravel 如何在blade文件中使用Vue组件,具体代码详情请看下文: 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan ui react 系统还提供了非常便捷的auth脚手架,带登录注册. php artisan ui react --auth 3.组件位置 Vue组件ExampleComponent.vue将被放置在resources/js/components目录中.ExampleCompo

  • 如何在JS文件中获取Vue组件

    1. 背景 最近在写项目时候遇到这样一个需求: 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件. 在 utils.js 文件中有一些函数,需要操作 my-component.vue 中的 data 和 methods. 为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例. 2. 思路 通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里. 3. 目录结构 src/ ├── App.vue ├── asset

随机推荐