vue-router的使用

关于vue-router的基本使用方法
    首先，需要下载vue-router

npm install vue-router --save

vue-router在html或组件中的展现　　

```

<div id="box">
    <ul>
         <li><router-link to="/home">Home</router-link></li>
         <li><router-link to="/news">News<router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//路由配置
//组件
var Home={template: '<div><h3>我是主页</h3></div>'}
var News={template: '<div><h3>我是新闻页</h3></div>'}
var routes=[
    {path: '/home',component: Home},
    {path: '/news',component: News}
]
var router=new VueRouter({
    routes: routes
});
new Vue({
    el: '#box',
    router: router
});
</script>

　　

```
 嵌套路由
```

 <div id="box">
     <ul>
         <li><router-link to="/home">Home</router-link></li>
         <li><router-link to="/news">News<router-link></li>
     </ul>
     <router-view></router-view>
 </div>
 <script src="vue.js"></script>
 <script src="vue-router.js"></script>
 <script>
 //路由配置
 //组件
 var Home={
     template: '<div><h3>我是主页</h3>'+
     '<ul>'+
     '<li><router-link to="/home/login">Login</router-link></li>'+
     '<li><router-link to="/home/reg">Register<router-link></li>'+
     '</ul>'+
     '<router-view></router-view>'+
     '</div>'
 }
 var Login={template: '<div><h3>我是登录</h3></div>'}
 var Reg={template: '<div><h3>我是注册</h3></div>'}
 var News={
     template: '<div><h3>我是新闻页</h3>'+
26     '<ul>'+
     '<li><router-link to="/home/detail/001">第一条新闻</router-link></li>'+
     '<li><router-link to="/home/detail/002">第二条新闻<router-link></li>'+
     '</ul>'+
     '<router-view></router-view>'+
     '</div>'
 }
 var Detail={template: '<div>{{$route.params}}</div>'}
 /*$route.params可获取当前的{"id":"001"}
 *$route.query可获取到url后的参数?a=22&b=kk,{"a":"22","b":"kk"}
 */
 var routes=[
     {path: '/',component: Home},//默认访问主页
     {
         path: '/home',
         component: Home,
         children: [
              {path: '/home/login',component: Login},
              {path: '/home/reg',component: Reg}]
        },
     {
         path: '/news',
48         component: News,
         children: [
             {path: '/news/detail/:id',component:Detail}//这点要注意
         ]
       }
 ]
 var router=new VueRouter({
     routes: routes
 });
 new Vue({
     el: '#box',
     router: router
 });
 </script>

```

原文地址：https://github.com/TimWST/blog/blob/master/js/vue-router.md