<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <template id="tmpl"> <div> <h1>这是 Account 组件</h1> <router-link to = "/ the Account / the Login" > Log </ Router-Link > < Router-Link to = "/ the Account / the Register" > Register </ Router-Link > < Router-View > </ Router-View > </ div > </ template > < Script > // template object components var Account = { template: ' #tmpl ' } var Login = { template: '<h3> log </ H3> ' } var Register = { Template: ' <h3> Register </ H3> ' } var Router = new new VueRouter ({ routes: [ { path: ' / Account ' , Component: Account, / / use children attribute to achieve sub-routing, while the front of the sub-routing path, not to take /, otherwise you will never begin to root path request, so inconvenient for our customers to understand the URL address children: [ {path: ' the Login ' , the Component: } Login, {path: ' Register ', component: register } ] } // { path: '/account/login', component: login }, // { path: '/account/register', component: register } ] }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router }); </script> </body> </html>