1.路由的基本用法

    <body>
        <div id="app">
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <!-- 占位符 -->
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript">
        //注册组件
        var register = Vue.extend({
            template:'<h2>注册</h2>'
        });
        var login = Vue.extend({
            template:'<h2>登录</h2>'
        });
        //定义路由并注册
        var vueRputer = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        });
        //使用路由
        new Vue({
            el:'#app',
            router:vueRputer
        });
    </script>

2.路由的传值

    <body>
        <div id="app">
            <router-link to="/login">登录</router-link>
            <router-link to="/register/xiaoming">注册</router-link>
            <!-- 占位符 -->
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript">
        //注册组件
        var register = Vue.extend({
            template:'<h2>注册{{onname}}</h2>',
            data:function(){
                return{
                    onname:''
                }
            },
            created:function(){
                this.onname =this.$route.params.uname
            }
        });
        var login = Vue.extend({
            template:'<h2>登录</h2>'
        });
        //定义路由并注册
        var vueRputer = new VueRouter({
            routes:[
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register/:uname',component:register}
            ]
        });
        //使用路由
        new Vue({
            el:'#app',
            router:vueRputer
        });
    </script>