Weex Getting Started tutorial 10,vue-router routing

Source: Internet
Author: User
Tags wrapper
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...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.