Vue Router路由

Vue路由类似于Node中的路由

Node路由：路由根据不同的请求地址，执行不同的函数

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

组件注册：全局注册、局部注册

组件分类：1、路由组件 2、普通组件

Vue Router使用步骤

1.引入vue文件

2.创建组件

    //注册
    let RouterC = {
        template:"#register"
    }
    //登录
    let RouterA = {
        template:"#login"
    }

    new Vue({
        el:"#app",
        components:{
            RouterC,RouterA
        },
    })

3.创建router路由

//创建路由
    let vueRouter = new VueRouter({
        routes:[
            {
                name:"register",
                path:"/register",
                component:RouterC
            },{
                name:"login",
                path:"/login",
                component:RouterA
            },
        ]
    })

4.挂载router路由

    new Vue({
        el:"#app",
        components:{
            RouterC,RouterA
        },
        router: vueRouter
    })

router-link导航

声明式导航

1、字符串类型

<router-link to ="/register">注册</router-link>

2、对象类型

path

<router-link :to ={path:'/login'}>登录</router-link>

name

<router-link :to ={name:'login'}>登录</router-link>

编程式导航

使用声名式导航底层$router.push()方法进行导航

methods:{
            loginGp(){
                this.$router.push({name:"login"});
            }
        }