Weex Getting Started tutorial 10,vue-router routing

Introduction

Creating a single-page application with Vue.js + Vue-router is very simple. With Vue.js, we've assembled the components into an application, and when you're adding vue-router, you just need to configure the components and route mappings, and then tell Vue-router where to render them.

Vue in Weex
Vue.js is a progressive JavaScript framework developed by Evan you and is excellent in terms of ease of use, flexibility and performance. Developers can build modular Web applications quickly by composing *.vue files, based on <template>, <style> <script>.

Vue.js officially released the 2.0 release in October 2016, which included the design of the virtual-dom and pre-compilers, allowing the framework to be run out of HTML and CSS parsing, relying only on JavaScript, while Virtual-dom made The Vue 2.x rendering into the native UI became possible.

At present, Weex and Vue are working on official cooperation, and Vue 2.x as the built-in front-end framework, Vue also has the ability to develop native applications.

Vue.js Simple to use:

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

Official link https://cn.vuejs.org/v2/guide/

Vue.js also has more peripheral technology products, such as Vuex and Vue-router, these libraries can also work well in the Weex.

Next, just introduce Vue-router,vuex do not make the relevant introduction, please visit the official website document for details.

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

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

Vue-router is a tool library developed specifically for Vue.js to enable single-page applications to write navigation and jump information for pages in a declarative way.

Plainly speaking, it is the routing function. installation

Since we are both native and Weex, we download the Vue, Vue-router JS files directly and refer to them. Direct Download Vue-router

The unpkg.com provides a CDN link based on NPM. The link above will always point to the latest version of NPM release. You can also specify a version number or Tag like https://unpkg.com/vue-router@2.0.0/dist/vue-router.js. Vue

Recommendation: Unpkg, will remain consistent with the latest version of NPM release. You can browse NPM package resources in unpkg.com/vue/.

Note: Do not use the minimum compression version of the development environment, or you will lose the error prompts and warnings! Use

Load the vue-router behind the Vue and it will be installed automatically:

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

Or

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

code Example

Cond...