vue的路由传参方式

1.动态路由传参

在配置路由时，在需要传递参数的路由中配置动态路由来接受参数。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

此时可以通过编程式路由导航或者<router-link>来进行路由跳转

this.$router.push(`/user/${id}`)
<router-link to=`/user/${id}`></router-link>

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
跳转后取出页面携带参数

this.$route.params.id  // 注意，这里取出参数时是 $route而不是$router

2. 命名路由传参

在配置路由文件时，需要在跳转的路由配置name，通过name找到对应的路由，通过params传递参数。

const router = new VueRouter({
  routes: [
    // name命名路由
    { path: '/user', name:'user', component: User } 
  ]
})

跳转路由方式，需要注意的是如果提供了 path，params 会被忽略，所以这里有name的情况下，不能再写上path。

this.$router.push({
  name:'user'，
  params:{
     id:123
  }
})  // router-link标签跳转方式类似，这里就不再重复写了

跳转后取出页面携带参数

this.$route.params.id

然而，这种方式传递的参数在刷新页面之后就会造成数据的丢失，那我们有啥好的方法解决吗？给大家推荐几种比较常用的解决方案。
1.在路由配置文件中加上动态参数，即和第一种方式混用，此时的id并不会接在url后面。
2.使用query传参，即下列第三种方式，但当传递对象或者数组时，F5刷新页面，参数会变成[object object]的格式，导致数据失效，此时可以将传递的参数序列化，即通过JSON.stringify()转化成字符串，这样刷新页面数据就不会丢失了。
3.当然我们还可以通过vuex，localstorage等存储方式，这种方式就需自己要把握参数存取的时机。

3.通过path匹配路由，query拼接传参，传递的参数会以？的形式拼接在url后面如 ?id=123

const router = new VueRouter({
  routes: [
    // path地址传参
    { path: '/user', component: User } 
  ]
})

路由跳转

this.$router.push({
  path:'user'，
  query:{
     id:123
  }
})  // router-link标签跳转方式类似，这里就不再重复写了

跳转后取出页面携带参数，在url地址也能看到传递的参数。

this.$route.query.id //这里的参数是通过query取出而不是params

最后编辑于：2020.07.17 15:04:06