简介
weex-router 是一个基于 Vue Router、weex-navigator 和 weex-ui 的路由管理器，它能够实现 weex 页面之间的跳转和传参，同时也提供了常用的路由功能，如路由拦截、路由跳转动画、路由参数校验等。
安装
使用 NPM 安装 weex-router：
npm install weex-router --save
初始化
在入口文件 app.vue 中引入 weex-router 并初始化：
-- -------------------- ---- -------
----------
-----
--------------
------
-----------
--------
------ ---------- ---- --------------
------ ------ ---- -----------
------ --- ---- ------------
-------------------- -
-------
---
---
---------配置路由
在 routes.js 中配置路由：
-- -------------------- ---- -------
------ ------- -
-
----- ----
----- -------
---------- ---------------------------
--
-
----- ------------
----- -------
---------- ----------------------------
----- -
------ -----
-
-
-跳转页面
在页面中使用 $router.push 方法进行路由跳转：
-- -------------------- ---- -------
-------- -
------------ -
-------------------
----- -------
------- -
--- --
-
--
-
-获取路由参数
在页面中使用 $route.params 获取路由参数：
created() {
this.id = this.$route.params.id;
}路由拦截
在路由配置中使用 beforeEnter 方法进行拦截：
-- -------------------- ---- -------
------ ------- -
-
----- ----
----- -------
---------- ---------------------------
--
-
----- ------------
----- -------
---------- ----------------------------
----- -
------ -----
--
------------ ---- ----- ----- -- -
-- ------------- - - --- -- -
-------
- ---- -
------------
-
-
-
-路由跳转动画
在路由配置中使用 meta 属性进行动画配置：
-- -------------------- ---- -------
------ ------- -
-
----- ----
----- -------
---------- ----------------------------
----- -
----------- ------
-
--
-
----- ------------
----- -------
---------- ----------------------------
----- -
------ ------
----------- -------------
-
-
-路由参数校验
在路由配置中使用 props 属性进行参数校验：
-- -------------------- ---- -------
------ ------- -
-
----- ----
----- -------
---------- ---------------------------
--
-
----- ------------
----- -------
---------- ----------------------------
----- -
------ -----
--
------ ------- -- --
--- -----------------------
--
-
-总结
weex-router 是一个非常实用的路由管理工具，它能够帮助开发者快速搭建 weex 应用的路由系统，并提供了常用的路由功能，能够满足大部分应用的需求。如果你正在开发 weex 应用，不妨试试 weex-router，相信它会帮助你事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffde13