在开发单页应用（SPA）时，路由管理是必不可少的一部分，而 Vue.js 提供了一个强大的路由管理工具——vue-router。但是在某些情况下，我们可能需要在 Vuex 中存储路由状态，这时候就需要使用 vuex-router-sync 这个插件。
什么是 vuex-router-sync
vuex-router-sync 是一个 Vue.js 插件，它可以将 vue-router 中的路由状态同步到 Vuex 的 store 中，从而实现在 Vuex 中管理路由状态的目的。它提供了一个名为 sync 的方法，将 vue-router 的状态与 Vuex 的状态同步。
如何使用 vuex-router-sync
首先，我们需要安装 vuex-router-sync：
npm install vuex-router-sync --save
然后，在我们的 Vuex store 中，需要引入 vuex-router-sync 并使用 sync 方法将 vue-router 的状态与 Vuex 的状态同步：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------ - ---- - ---- ------------------ ------ ------ ---- ---------- ------------- ----- ----- - --- ------------ -- ---- ----- -- -- -- - ---------- ---- ---- ----- ----------- ------- ------ ------- -----
现在，我们可以在 Vuex 中访问路由状态了。在 Vuex 的 getters 中，我们可以使用 $route 对象获取当前路由状态：
const store = new Vuex.Store({
getters: {
currentRoute: state => state.route
}
})在 Vue 组件中，我们可以通过 $route 访问路由状态：
export default {
computed: {
currentRoute () {
return this.$route
}
}
}示例代码
下面是一个简单的示例代码，演示了如何使用 vuex-router-sync 实现在 Vuex 中管理路由状态：
-- -------------------- ---- -------
-- -------
------ --- ---- -----
------ --- ---- -----------
------ ------ ---- ----------
------ ----- ---- ---------
--- -----
--- -------
-------
------
------- - -- ------
--
-- ---------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------------------
----- ------ - -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
----- ------ - --- -----------
----- ----------
------
--
------ ------- ------
-- --------
------ --- ---- -----
------ ---- ---- ------
------ - ---- - ---- ------------------
------ ------ ---- ----------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
------------- ----- -- -----------
-
--
----------- -------
------ ------- -----
-- -------
----------
-----
---------- - ---- - ---------------
------------ -------------------------
------------ -------------------------------
---------- ------ -- ------------ ------
--------- -- ----- ------
------- -------------------------------------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ -----------------------
--
------------ -- -
------ --------------------------------
-
--
-------- -
--------- -- -
-------------------------------
-
-
-
---------总结
使用 vuex-router-sync 可以将 vue-router 的状态同步到 Vuex 的 store 中，实现在 Vuex 中管理路由状态的目的。在 Vuex 的 getters 中，我们可以使用 $route 对象获取当前路由状态，在 Vue 组件中，我们可以通过 $route 访问路由状态。在开发 SPA 应用时，使用 vuex-router-sync 可以更好地管理路由状态，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656a83f5d2f5e1655d2ec8b8