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

最新推荐文章于 2022-11-21 14:46:30 发布

陈科肇

最新推荐文章于 2022-11-21 14:46:30 发布

阅读量5k

点赞数

分类专栏： Weex 文章标签： weex

本文链接：https://blog.csdn.net/u013474104/article/details/56669093

版权

Weex 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js及vue-router创建单页应用。详细讲述了Vue.js的基本使用方法及特性，包括其2.0版本引入的Virtual-DOM和预编译器。此外，还深入探讨了vue-router的安装与使用方法。

摘要由CSDN通过智能技术生成

介绍

用 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>

代码示例

待续…