简介
weex-vue-router 是一个专为 weex 应用开发设计的路由管理库，由 Vue-Router 所衍生。
该 npm 包能够帮助你更好地管理你的 weex 应用的路由，提高开发效率，并且支持根据用户的请求，自动异步加载相应组件，从而大大减少应用初始化时所需的加载时间。
安装
- 通过 npm 安装 weex-vue-router：
--- ------- ------ ---------------
- 在你的 Weex 应用入口文件（通常是 index.js）中引入 weex-vue-router：
------ ------ ---- ------------------
使用
我们主要需要使用的是 weex-vue-router 提供的两个组件：VueRouter 和 RouterView。
VueRouter
VueRouter 是 weex-vue-router 提供的路由管理器，它负责管理路由表，以及路由的跳转和拦截等功能。
我们需要做的就是使用 VueRouter 的实例化对象，并将需要管理的路由配置传给它。
假设我们有两个页面：首页（Home.vue）和详情页（Detail.vue），那么我们需要做的就是在入口文件 index.js 中，实例化 VueRouter 对象，并将这两个页面对应的路由地址和组件名称，以路由表的形式定义出来，如下所示：
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- ---------- ---------- ------ --
--
---在这个例子中，我们定义了两个路由，分别是 "/" 和 "/detail"，它们分别对应着 Home 和 Detail 两个组件。
RouterView
RouterView 是 weex-vue-router 提供的视图组件，它负责把当前活动路由的组件渲染出来。
我们只需要在我们想要显示路由组件的位置，使用 RouterView 组件即可。例如，在我们的入口文件 index.js 中，我们可以这样使用 RouterView：
--- ----- ------- ------- --- -- -------------- ------------
这样，在你的应用中，RouterView 就会自动根据当前活动的路由，加载对应的组件。
路由跳转
在使用了 VueRouter 和 RouterView 之后，我们就可以使用 weex-vue-router 提供的路由跳转功能了。例如，在我们的 Home.vue 组件中，我们可以这样跳转到 Detail 页面：
-----------------------------
路由拦截
有时候我们需要在用户跳转页面的时候，进行一些权限验证或者其他的逻辑操作。在这种情况下，我们可以使用 weex-vue-router 提供的路由拦截功能。
我们只需要在 VueRouter 的实例化对象中，传入一些拦截函数，这些函数会在路由跳转的过程中被调用，可以让我们在路由跳转前，对用户的请求进行拦截和处理。
以下是一个示例代码，展示了如何使用拦截功能对路由进行权限验证：
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- ---------- ---------- ------ --
--
----------- ---- ----- ----- -- -
-- -------- ------ -------------
-- -------- --- ---------- -
-- -------------------
-- ------------ -
---------------
- ---- -
-- --------------
-------
-
- ---- -
-- ---------------------------
-------
-
--
---在这个示例代码中，我们定义了一个 beforeEach 拦截函数，它会在用户跳转路由之前被调用。如果用户请求的是 Detail 页面，那么我们首先进行权限验证（假设 isLogined 变量表示用户是否已登录）。如果用户没有登录，那么我们将用户重定向到登录页面；否则，我们直接让用户跳转到 Detail 页面。
注意，在路由拦截函数中，我们必须调用 next() 函数，来让页面跳转到目标路由。如果我们在拦截函数中不调用 next() 函数，那么页面将无法跳转。此外，我们还可以调用 next(false) 函数，来阻止页面跳转，相当于取消用户的请求。
总结
weex-vue-router 为我们提供了一种便捷、高效的 weex 应用路由管理方式，能够帮助我们提高开发效率，并且支持根据用户的请求，自动异步加载相应组件，从而减少应用初始化时所需的加载时间。
在使用 weex-vue-router 时，我们需要注意以下几点：
- 使用 VueRouter 对象管理路由表和路由跳转；
- 使用 RouterView 组件渲染当前活动路由的组件；
- 使用 beforeEach 拦截函数在路由跳转前进行权限验证等操作；
- 在拦截函数中使用 next() 函数来让页面跳转到目标路由。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005552a81e8991b448d25f1