Vue-router 创建与切换组件实例

1、定义组件模板实例

var login = {
            template: "#login"
        }

        var register = {
            template: "#register"
        }

2、引入路由js文件

3、创建路由对象

//创建vue-router对象
        var router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/login'
            }, {
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })

4、将路由对象挂载到vue实例中

var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            //把路由对象挂载到vue实例中
            router: router,
        })

5、使用路由显示组件

        
        登陆
        注册
        
        
    

完整代码如下：

    
    
    
    
    
    
    



    


        
        登陆
        注册