快捷導(dǎo)航

vue如何在store倉(cāng)庫(kù)中使用路由

更新時(shí)間：2022年03月30日 15:32:02 作者：吳冬雪~

這篇文章主要介紹了vue如何在store倉(cāng)庫(kù)中使用路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在store倉(cāng)庫(kù)中使用路由

在倉(cāng)庫(kù)中，this的指向指的是store，但是在一般的工程，我們有可能會(huì)需要在倉(cāng)庫(kù)中走路由等邏輯，這個(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 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;?

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決
這篇文章主要介紹了vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
如何構(gòu)建一個(gè)Vue插件并生成npm包
這篇文章主要介紹了如何構(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à)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過(guò)來(lái))
這篇文章主要介紹了uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過(guò)來(lái)),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
vue中路由參數(shù)傳遞可能會(huì)遇到的坑
這篇文章主要給大家介紹了關(guān)于vue中路由參數(shù)傳遞遇到的坑的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Vue祖孫組件如何實(shí)現(xiàn)傳值
這篇文章主要介紹了Vue祖孫組件如何實(shí)現(xiàn)傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法
封裝一個(gè)組件時(shí),我使用到了v-for和v-if,它們?cè)谕粯?biāo)簽內(nèi),總是提示v-for循環(huán)出來(lái)的item在實(shí)例中沒(méi)有被定義,查詢資料后原因是因?yàn)関-for和v-if在同級(jí)使用時(shí),v-if優(yōu)先級(jí)比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時(shí)使用時(shí)產(chǎn)生的問(wèn)題和解決辦法
2024-07-07
Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測(cè)數(shù)據(jù)更新并且重新渲染頁(yè)面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2021-10-10
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案
在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下
2023-10-10