记录下 vue里面的 路由传参

vue里的路由传参有两种  1.router-link  声明式导航    2.router.push()  编程式导航 

router-link不传参：

<router-link to="news(组件路径)"></router-link>

router.push不传参：

this.$router.push({path:'news'});

router-link传参

1.params 命名式路由    这种传参方式参数在url里是看不见的   参数在跳转的组件里通过 this.$route.params获得；

注意 （1）:to   

           (2)    只能通过 name   不能用 path 

<router-link :to="{name:'news',params:{userId:123}}"></router-link>

 2.query  url里面可以看见传的参数   /news?userId = 123    参数在跳转的组件里通过 this.$route.query获得；

注意 (1)  :to

        (2)     path   name 都可以

<router-link :to="{path:'news',query:{userId:123}}"></router-link>

router.push()传参

参数获取方式 和 上面一样

1.params     必须得写name  ，然后router配置里面写上 name;写 path   获取的params是空；

this.$router.push({name:'news',params:{userId:123}});

2.query 

this.$router.push({path:'news',query:{userId:123}});