vue路由跳转传参

一、使用路由name跳转params传参, 此时刷新页面数据会丢失，地址栏不会显示参数信息.,如果想让参数显示在地址栏中可以在路由设计中路径后面跟:id；地址栏将会以/route-name/123456的形式展现。此时刷新页面数据也不会丢失。

this.$router.push({
   name: 'routeName',
   params: {
       id: '123456'
   }
})

目标页接收参数：

this.$route.params.id

二、使用path跳转query传参，此时刷新页面数据也不会丢失,路由后面无需跟:id；地址栏将会以/route-name?id=123456的形式展现。

this.$router.push({
   path: '/routeName',
   query: {
       id: '123456'
   }
})

目标页接收参数：

this.$route.query.id

三、使用path跳转参数跟在路径后面，路由设计中路径后面跟:id；地址栏将会以/route-name/123456的形式展现。此时刷新页面数据也不会丢失。

this.$router.push({
   path: '/routeName/123456'
})

目标页接收参数：

this.$route.params.id

其他：有时我们可能不想通过api的方式跳转路由，而是使用router-link,其实区别也不大

//一、path跳转传参, 参数跟在路径后面，路由需要跟:id 
//this.$route.params.id接收参数
<router-link :to="{path: '/routeName/123456'}"></router-link>

//二、name跳转，params传参，刷新页面数据会丢失，
//this.$route.params.id接收参数
<router-link :to="{name: '/routeName', params: { id: 123456 }}"></router-link>

//三、path跳转query传参
//this.$route.query.id接收参数
<router-link :to="{path: '/routeName', query: { id: 123456 }}"></router-link>

详细地址：https://www.huolihua.cn/#/article-detail/ajn6gainhgc00000