Vue Router

一.Vue Router概述

Vue路由：路由根据不同的路径，执行不同的组件

二.Vue Router入门

1.引入vue,js和vue-router.js

2.创建组件

3.创建router

// 创建路由【添加路由规则】
    let vueRouter = new VueRouter({
        routes:[
            {
                name:"register",// 路由名称
                path:"/register",// 组件对应的路由路径
                component:RegisterComponent
            },
            {
                name:"login",// 路由名称
                path:"/login",// 组件对应的路由路径
                component:LoginComponent
            }
        ]
    });

4.挂载router

new Vue({
        el:"#app",
        components:{RegisterComponent,LoginComponent},
        router
    });

5.使用router

    

    注册
    登录


    



    

三.router便捷方式

四.声明式导航

1.字符串类型

登录

2.对象类型

2.1、path

注册

2.2、name

注册

五.编程式导航

methods:{
    loginGo(){
        this.$router.push({path:"/login"});
    }
}

 六.默认路由

    
    
    
    





    注册
    登录