Weex入门教程之10，vue-router 路由

介绍

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

Vue in Weex

Vue.js 是 Evan You 开发的渐进式 JavaScript 框架，在易用性、灵活性和性能等方面都非常优秀。开发者能够通过撰写 *.vue 文件，基于 <template>, <style>, <script> 快速构建组件化的 web 应用。

Vue.js 在 2016 年 10 月正式发布了 2.0 版本，该版本加入了 Virtual-DOM 和预编译器的设计，使得该框架在运行时能够脱离 HTML 和 CSS 解析，只依赖 JavaScript；同时 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成为了可能。

目前 Weex 与 Vue 正在展开官方合作，并将 Vue 2.x 作为内置的前端框架，Vue 也因此具备了开发原生应用的能力。

Vue.js简单使用：

<template>
<div class="wrapper">
<text class="weex">Hello Weex !</text>
<text class="vue">Hello Vue !</text>
</div>
</template>
<style scoped>
.wrapper {
flex-direction: column;
justify-content: center;
}
.weex {
font-size: 60px;
text-align: center;
color: #1B90F7;
}
.vue {
font-size: 60px;
text-align: center;
margin-top: 30px;
color: #41B883;
}
</style>

官方链接https://cn.vuejs.org/v2/guide/

Vue.js 也有较多周边技术产品，如 Vuex 和 vue-router 等，这些库也可以在 Weex 中很好的工作。

接下来，只介绍vue-router，Vuex不作相关介绍，详情请访问官网文档。

vue-router：https://router.vuejs.org/zh-cn/

Vuex：https://vuex.vuejs.org/zh-cn/

vue-router 是专为 Vue.js 开发的便于实现单页应用的工具库，能够以声明式的方法编写页面的导航和跳转信息。

说白了，就是路由功能。

安装

由于我们是原生和weex混合使用，所以我们就直接下载vue、vue-router的js文件并引用即可。

直接下载

vue-router

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

vue

推荐：unpkg, 会保持和 npm 发布的最新的版本一致。可以在unpkg.com/vue/ 浏览 npm 包资源。

注： 开发环境不要用最小压缩版，不然就失去了错误提示和警告!

使用

在 Vue 后面加载 vue-router，它会自动安装的：

<script src="./plug-in/vue/vue.js"></script>
<script src="./plug-in/vue/vue-router.js"></script>

或

<script>
import vue from './plug-in/vue/vue.js'
import router from './plug-in/vue/vue-router.js'
...
</script>

代码示例

待续…