关于vue.js:vue-动态路由设置对比query方式跳转

一、动静路由配置 router.config.js

设置 path 门路时，减少 冒号 “:” 申明前面的为变量，间接拼接在 path 中

{
  path: '/sign-detail/:id',
  name: 'sign-detail',
  component: () => import('@/views/adv-order-management/sign-detail'),
  meta: {title: '报名详情', keepAlive: false}
}

二、动静跳转办法

间接将变量 id 拼接在 path 前面即可（上面跳转后为 '/sign-detail/5'）

let id = 5
this.$router.push({path: '/sign-detail/' + id})

三、在动静路由的页面获取参数

在对应页面的路由跳转对象 $route 的 params 中获取

created () {const { id} = this.$route.params
}

以上就是动静路由的简略应用办法。

四、query 键值对跳转

• query 在应用上更加简洁，不须要配置路由，有多个参数时也更加不便

• 跳转时，在 query 中传入键值对（上面跳转后为 '/sign-detail?id=5&type=1'）

  let id = 5
  this.$router.push({
    path: '/sign-detail',
    query: {
        id,
        // 间接设置多个键值对
        type: 1
    }
  })

• 获取时，在路由跳转对象 $route 的 query 中获取

  created () {const { id, type} = this.$route.query
  }

五、两种形式异同？

1、重要！仅参数变动 时，两种形式都是仅更新路由，不触发页面刷新

例如 '/sign-detail/5' 跳转到 '/sign-detail/4'
或者 '/sign-detail?id=5' 跳转到 '/sign-detail?id=4'

这两种状况下，都只能看到地址栏的路由变动，页面数据并没有更新，须要手动监听 route 刷新，如：

watch: {'$route' () {this.$router.go(0)
  }
},

2、如果你的我的项目中，有很多 重定向 的性能，抉择 动静路由 是一种省心的形式。

假如一个场景，我正在浏览 '/sign-detail?id=5'这个页面，
下一步我要登录，登录后 重定向回来时，还须要在 query 中带上 token，
这时我必定须要一些代码量去解决参数的 merge

然而如果我抉择 '/sign-detail/5'，这个场景我就不须要做什么了，间接重定向回来即可。

3、当然，两种形式的应用都能够的。具体看本人的须要啦

欢送留言，一起摸索更多~