Case heroes here at an example:
The overall project route
The whole idea is: main.js as the entry file program, you can write routing-related code, but this does not comply with the principle of single responsibility, not conducive to the maintenance of the code, so using another route router.js document management, but they need to make router route .js managed to play a role in main.js in.
Detailed steps:
1. Write the public component appslider.vue <router-view>
2.App.vue, set <router-view> container
3.router.js, the introduction and vue vue-router, before introduction to look node_modules whether the corresponding packet has been installed, and finally Vue.use (VueRouter).
4.router.js, the import component to be rendered Bar.vue, List.vue, Foo.vue
5.router.js configured routing routes
6.router.js Examples of routes: new new VueRouter ()
7.router.js export target router
8.main.js introduced router.js
9. the mount route option router new Vue example of main.js
From the list of heroes to route edit page
Here recorded a relatively common but relatively complex situations that deal with similar cases in the heroes' different click the edit button -> render the same component edit.vue "situation.
When used herein navigation function, a function of not only the need to fill assembly Push objects required to fill the second parameter id values.
Detailed steps:
JS part of 1.list.vue:
methods->
showEditVue (ID) {. Router.push the this $ ({name: 'Edit', the params: {ID: ID}})};
2.router.js , the original add routing configuration ID:
{path: '/ Edit /: ID'}
such an approach is called dynamic routing
3.edit.vue of:
obtaining a dynamic routing parameters $ route.params.id the this.
4.edit. in vue:
axios.get (+ the this URL \ route.params.id.) .then ((RES) => {} this.formData = res.data);
5.edit.vue in:
Mounted () {the this. getHeroById ();}
call method where 4
6. 5 to bind to the target data acquired in the view
