Use in conjunction webpack vue-router and its sub-route, i.e., route nested

Carried out on the basis of a project on, so the basic configuration not go into here.

A combined use vue-router webpack

1. Create a new assembly file .vue

2. Enable Routing

Plug cnpm i vue-router -S

PS：npm install name -save 简写（npm install name -S）

　　 npm install name -save-dve 简写（npm install name -D）

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

. 1 Import from Vue 'VUE'
 2  // 1. Import vue-router packets 
. 3 Import VueRouter from 'vue-router'
 . 4  // 2. Manual installation VueRouter 
. 5  Vue.use (VueRouter)
 . 6 Import from App './App. VUE '
 . 7 Import from Account' ./main/Account.vue '
 . 8 Import goodList from' ./main/GoodList.vue '
 . 9  // 3. Create routing object 
10  var Router = new new VueRouter ({
 . 11      routes: [
 12 is          { path: '/ Account' , Component: Account},
 13 is          {path: '/ goodList' , Component:
goodList}
14     ]
 15  })
 16  var VM = new new Vue ({
 . 17      el: '# App' ,
 18 is      the render: function (createElements) {
 . 19          return createElements (App)
 20 is      }, // the render will el designated container, all SUMMARY emptied cover, 
21      // so do the route and router-view router-link element el are written directly controlled 
22 is      Router // 4. the routing object to vm to mount an object 
23  })
 24  // Note: App render function is obtained by this component of VM instances, render, and 
25  //   render function if the component to be rendered, the rendered components, only put el: '#app' specified element; 
26  / / // Account and GoodsList assembly, is monitored by the route matching, so that the two components only appear to belong to route <router-view> </ router-view> go;

main.js

The net effect: Click the response option display

Second, the combination of webpack children achieve sub-routing

Both plug-ins can be installed on the vue, Vetur and Vue 2 Snippets

The results show

Three, lang attribute and scoped attributes style tags

Ordinary style tags only support plain style, if you want to enable scss or less, the need for the style element, set the lang attribute
as long as the style tag is defined in the .vue component, it is recommended that all open scoped attribute style

IV pulled routing module

New router.js