关于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>'+
        '<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',
            component: News,
            children: [
                {path: '/news/detail/:id',component:Detail}//这点要注意
            ]    
        }
    ]
    var router=new VueRouter({
        routes: routes
    });
    new Vue({
       el: '#box',
       router: router
    });
</script>