Vue nested route

<!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> This is a sub-route in the log </ H3> ' 
    } 

    var Register = { 
      Template: ' <h3> This is a sub-route in the registered </ H3> ' 
    } 

    var Router =  new new VueRouter ({ 
      routes: [ 
        { 
          path: ' / the Account ' , the Component: the Account,
           // use children attribute to achieve sub-routing, while the front of the sub-routing path, not to take /, 
          // otherwise never begin to root path request, so inconvenient for our customers to understand URL address 
          Children: [ 
            {path: ' Login ' , 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>
Guess you like
