<div>
      <router-link to="/index">主頁</router-link>
      <router-link to="/first">子頁</router-link>
      <router-view></router-view>
</div>
<script src:'vue.js鏈接'></script>
<script src:'vue.router鏈接'></script>

<script>
      var Index={
            template:`
                  <h1>這是主頁</h1>
            `
      };
      var First={
            template:`
                  <div>
                  <h2>這是分頁</h2>
                  <ul>
                        <li>
                              <router-link to='/first/login?name=qwe&pass=123'>登錄</router-link>
                                      (&符可加一個(gè)或兩個(gè))
                        </li>
                        <li>
                              <router-link to='/first/regist/asd/456'>注冊(cè)</router-link>
                        </li>
                  </ul>
                  <router-view></router-view>
                  </div>
            `
      };
      var Login={
            template:`
                  <div>
                        <h3>這是登錄</h3>
                        <a>{{$route.query}}</a>
                        <a>{{$route,query.name}}</a>
                        <a>{{$route.query.pass}}</a>
                  </div>
            `
      };
      var Regist={
            template:`
                  <div>
                        <h3>這是注冊(cè)</h3>
                        <a>{{$route.params}}</a>
                        <a>{{$route.params.name}}</a>
                        <a>{{$route.params.pass}}</a>
                  </div>
            `
      };
      const routes=[      
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {
                  path:'/first',
                  component:First,
                  childer:[
                        {path"login",component:Login},
                        {path:"regist",component:Regist}
                  ]
            }
      ];
      const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
      });
      new Vue({
            el:'.nr',
            router:router
      })
</script>