Vue path using dynamic mount assembly. Use of the process steps, to facilitate their subsequent use. Quick Start Vue step of Router
First, install the plug-in Vue Router
cmd change to the project directory. Execute c npm install VUE-Router --save. Vue Router official website: https://router.vuejs.org/zh/installation.html
Second, the use of Vue Router assembly main.js
Main.js added in the red box code is as follows:
Third, configure routing
Configuring route is divided into four steps: definition (routing) component, to define a route creating router instance, to create and mount a root instance. These four steps can uninstall all main.js, or you can use a modular write these four steps in a single module, the final import into the mount main.js
3.1 Definitions (routing) component
Routing component may be directly defined, may be introduced into the assembly has been defined. Introduced component has been defined herein. as follows
3.2 defining a route ( route object array )
The definition of an array of route objects . Path object is self-defined path (i.e. the path can be found using the corresponding components) , Component assembly means corresponding to the route. as follows:
Examples of objects Vue Router 3.3
Vue Router constructor call of a Vue Router create an instance of the routing object as defined in step 3.2 an array of values of the parameters passed object. as follows
3.4 mounts the root example
Fourth, the use of routing App.vue
Use <router-view> tag to display the App.vue component corresponding to the route, using the <router-link> tag corresponding to the specified display assembly when clicks, to the corresponding attribute is designated component route. as follows:
Pay attention
The new Vue project in HBuilderX in use npm run dev not up and running, using npm run serve just fine
npm install vue-router