VUE路由传参

1.动态路由传参

路由配置:  {name:'home',path:'/home/:id',component:Home}
    :id后面加？，表示params参数可传可不传
标签：<router-link to="/home/3"></router-link>
获取参数: this.$route.params.id
刷新页面参数不会丢失

2.params传参

不能使用path，需要使用name

1.to跳转

路由配置:  {name:'home',path:'/home',component:Home}
标签：<router-link :to="{name:'home',params:{id:3}"}"></router-link>
获取参数: this.$route.params.id
刷新页面参数会丢失
【注】to中不可以用 path，要用 name

2.$router跳转

路由配置:  {name:'home',path:'/home',component:Home}
标签：<button @click='toHome'></button>
    toHome(){
        this.$route.push({
            name:"home",
            params:{
                id:3
            }
        })
    }
获取参数: this.$route.params.id
刷新页面参数会丢失
【注】标签不可再使用router-link，因为此时没有to属性
        仍然要使用 name 而非 path

3.query传参

1.to跳转

路由配置:  {name:'home',path:'/home',component:Home}
标签：<router-link :to="{path:'/home',query:{id:3}"}"></router-link>
获取参数: this.$route.query.id
刷新页面参数不会丢失
【注】此时标签中的 path 可以换为 name

2.$router跳转

路由配置:  {name:'home',path:'/home',component:Home}
标签：<button @click='toHome'></button>
    toHome(){
        this.$route.push({
            path:"/home",
            query:{
                id:3
            }
        })
    }
获取参数: this.$route.query.id
刷新页面参数不会丢失
【注】标签不可再使用router-link，因为此时没有to属性
        此时标签中的 path 可以换为 name