vue路由中俩种传参方式

面试的时候可能会问出这样的问题,请说出vue路由中的俩种传参方法，route和router的区别

首先 route是指的当前的路由对象   router则是指的是 vue-router的实例 这个还有区别开的

有的童鞋可能知道路由 地址栏传参的俩种方式 

一种是传统的  query字符串类型传参 一种是restful规则的传参

/home?name=Jack                                   /home/:id      

首先我们先来说一下 页面的跳转方式 

1.<router-link to="/home/234">跳转首页</router-link>   //这个 vue-router组件的传参方法

2.this.$router.push({path:'/home',query:{name:'jack'}})   // js方式的跳转    
   this.$router.push({name:'home',params:{id:3}})

// 注意    path 和 query 搭配使用         name 和params 搭配使用

3.参数的接收

{{$route.params.id}}       {{$route.query.id}}

4.这里是路由的配置 

{
        name:'home',
        path:'/home/:id',  //动态路由
        component:()=>import('../views/Home.vue'),    //路由懒加载
        children:[
            {
                path:'/child',
                component:()=>import('../views/Child.vue')
            }
        ]
    }

5.路由守卫  在main.js文件中 

// 路由守卫  这个是全局路由守卫
router.beforeEach((to,from,next)=>{   // to 是 即将跳转的路由  from 来自那个路由  next 这个函数执行才能往下走
    console.log(to.path);
    next();
})