vue路由传参vue自带方法路由传参方式页面跳转带id过去刷新页面数据不丢失隐藏URL后的参数 详细教程

Posted 2021-09-14 Synchronize.

文章目录

• • vue路由传参方式
  • • 一、页面刷新数据会丢失
    • • 方法一：通过路由属性中的name来确定匹配的路由，通过params来传递参数
      • • *该方法可以隐藏URL后的参数
      • 方法二：使用Vue全局API：Vue.observable
    • 二、页面刷新数据不会丢失
    • • 方法一：使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数
      • 方法二：使用path匹配路由，通过query传参

vue路由传参方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式

sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异

一、页面刷新数据会丢失

使用场景：
页面跳转带id过去

方法一：通过路由属性中的name来确定匹配的路由，通过params来传递参数

通过路由属性中的name来确定匹配的路由，通过params来传递参数

eg:点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<div class="examine" @click="insurance(2)">查看详情</div>

// 父组件传值：将id带过去
methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

// 路由配置
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

// 子组件：获取参数id
this.$route.params.id

温馨提示：该方法刷新页面数据会丢失

*该方法可以隐藏URL后的参数

方法二：使用Vue全局API：Vue.observable

使用Vue全局API：Vue.observable

详细教程看如下博客：Vue.observable使用教程

温馨提示：该方法刷新页面数据会丢失

二、页面刷新数据不会丢失

方法一：使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数

使用动态路由传参，path中携带参数id，路由中使用 /:id 绑定对应参数

methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

// 对应路由配置
{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}

// 子组件中获取参数
this.$route.params.id

温馨提示：该方法刷新页面数据不会丢失

方法二：使用path匹配路由，通过query传参

使用path匹配路由，通过query传参

url路径中携带：

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

{
    path: '/particulars',
    name: 'particulars',
    component: particulars
}

// 子组件获取参数
this.$route.query.id

温馨提示：该方法刷新页面数据不会丢失