vue 跳转html 带参数

在Vue应用中，我们经常需要在不同的HTML页面之间进行跳转。有时候我们需要携带参数进行跳转，以满足业务需求。本文将介绍如何在Vue应用中进行带参数的HTML页面跳转。

一、使用Vue Router

Vue Router是Vue.js官方的路由管理器，它可以非常方便地实现SPA应用的路由跳转。在Vue应用中使用Vue Router可以轻松地实现带参数的HTML页面跳转。

1. 安装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)

2. 配置路由

在使用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。

3. 进行路由跳转

在Vue Router中进行路由跳转非常简单。只需要使用router-link组件进行跳转，或者使用router.push方法编程式导航。

• 使用router-link进行跳转

在Vue组件的模板中使用router-link组件可以轻松地进行路由跳转。例如：

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

上面的代码中，使用了router-link组件进行路由跳转，跳转到名为"detail"的路由，并且携带参数"id"，值为123。

• 使用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，并且参数需要进行编码处理。

1. 使用location.href进行跳转

使用location.href进行跳转非常简单。例如，我们要跳转到名为"detail"的HTML页面，并且携带参数"id"，值为123，可以如下所示：

location.href = '/detail.html?id=' + encodeURIComponent('123')

上面的代码中，使用了encodeURIComponent方法对参数进行了编码处理。这样做是为了避免参数中包含特殊字符，导致跳转URL格式错误。

2. 在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进行路由跳转，但是需要注意参数的编码解码问题。在实际开发中，需要根据实际情况选择合适的方式。

【文章原创作者：韩国服务器 https://www.68idc.cn 欢迎留下您的宝贵建议】