在vue应用中，我们经常需要在不同的html页面之间进行跳转。有时候我们需要携带参数进行跳转，以满足业务需求。本文将介绍如何在vue应用中进行带参数的html页面跳转。
一、使用Vue Router
Vue Router是Vue.js官方的路由管理器，它可以非常方便地实现SPA应用的路由跳转。在Vue应用中使用Vue Router可以轻松地实现带参数的HTML页面跳转。
- 安装Vue Router
在使用Vue Router之前，需要先安装它。可以通过npm安装Vue Router，具体命令如下：
npm install vue-router --save
安装完成后，在Vue项目中引入Vue Router，如下所示：
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
- 配置路由
在使用Vue Router进行路由跳转前，需要先配置路由。在Vue Router中配置路由很简单，只需要在Vue实例中定义routes数组，每个元素表示一个路由配置。例如：
const routes = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/detail/:id',
name: 'detail',
component: Detail
}
]
const router = new Router({
routes,
mode: 'history'
})
export default router上面的代码定义了两个路由配置。第一个路由对应路径为"/home"，组件为Home；第二个路由对应路径为"/detail/:id"，其中"id"是动态参数，组件为Detail。
- 进行路由跳转
在Vue Router中进行路由跳转非常简单。只需要使用router-link组件进行跳转，或者使用router.push方法编程式导航。
- 使用router-link进行跳转
在Vue组件的模板中使用router-link组件可以轻松地进行路由跳转。例如：
Show Detail
上面的代码中，使用了router-link组件进行路由跳转，跳转到名为"detail"的路由，并且携带参数"id"，值为123。
BIWEB 门户版几经周折，最终与大家见面了。BIWEB门户版建立在ArthurXF5.8.3底层上，有了更加强大的功能。 BIWEB WMS v5.8.3 (2010.1.29) 更新功能如下： 1.修正了底层getInfo方法中的调用参数，做到可以根据字段进行调用。 2.修正了栏目安装和卸载后，跳转链接的错误。 3.修正所有栏目分类系统，提交信息页面错误。 4.新增后台删除信息后仍停留原分
- 使用router.push方法进行跳转
在Vue组件中使用router.push方法可以实现编程式导航。例如：
this.$router.push({name: 'detail', params: {id: 123}})上面的代码中，使用了router.push方法进行路由跳转，跳转到名为"detail"的路由，并且携带参数"id"，值为123。
二、使用location.href
除了使用Vue Router进行路由跳转，还可以使用原生的location.href进行跳转。通过location.href实现路由跳转时，需要手动拼接URL，并且参数需要进行编码处理。
- 使用location.href进行跳转
使用location.href进行跳转非常简单。例如，我们要跳转到名为"detail"的HTML页面，并且携带参数"id"，值为123，可以如下所示：
location.href = '/detail.html?id=' + encodeURIComponent('123')上面的代码中，使用了encodeURIComponent方法对参数进行了编码处理。这样做是为了避免参数中包含特殊字符，导致跳转URL格式错误。
- 在HTML页面中获取参数
当跳转到带参数的HTML页面后，我们需要从URL中获取参数，以便后续使用。在JavaScript中可以通过location.search获取URL中的参数部分。例如，假设我们跳转到了名为"detail"的HTML页面，并且参数"id"的值为123，可以通过如下代码获取参数：
function getUrlParam(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
const r = window.location.search.substr(1).match(reg)
if (r != null) {
return decodeURIComponent(r[2])
}
return null
}
const id = getUrlParam('id')
console.log(id) // 输出123上面的代码中，使用了RegExp和match方法获取带参数的URL中的参数部分。使用decodeURIComponent方法对参数进行解码处理，避免参数中包含特殊字符导致解析错误。
综上，使用Vue Router进行路由跳转是比较推荐的方式。它可以更好地管理路由，跳转更快速，同时也更符合Vue的MVVM思想。当然，我们也可以使用原生的location.href进行路由跳转，但是需要注意参数的编码解码问题。在实际开发中，需要根据实际情况选择合适的方式。
