可变的 href - HTML

在 HTML 中，链接 (link) 的 href 属性是一个非常重要且易变的属性。 它可以被用来链接到内部或者外部的资源，例如页面、图片、音频或者视频等等。这个属性甚至可以在页面加载之后动态地修改。

静态 href

让我们从一个静态 href 开始，这意味着这个属性的值在页面加载时就已经确定，没有任何后续修改操作。 下面是一个例子，它将链接到 https://www.google.com。

<a href="https://www.google.com">Google.com</a>

动态 href

但是，在实际开发过程中，我们更经常需要使用动态的 href，它可以在页面加载后被改变，具体取决于用户行为或者程序代码的选择。下面是一些常用的动态链接案例。

通过 JavaScript 来改变 href

我们可以通过 JavaScript 来改变链接的 href，根据用户的行为或程序逻辑的要求来动态地修改链接指向的目标。例如，在下面的示例中，点击按钮将修改 a 标签中的 href 属性，使其指向 https://www.baidu.com。

<a id="myLink" href="https://www.google.com">Google.com</a>
<button onclick="changeUrl()">Let's go to Baidu!</button>

<script>
function changeUrl() {
  document.getElementById("myLink").href = "https://www.baidu.com";
}
</script>

通过后端编程来改变 href

我们可以通过后端编程来动态地生成链接，并将其嵌入到 HTML 页面中。在 PHP 中，我们可以这样做：

<a href="<?php echo $link_url; ?>"><?php echo $link_name; ?></a>

这将会根据后端程序的逻辑生成一个链接，链接指向 $link_url 变量指定的 URL，并以 $link_name 变量指定的文字来展示链接。

通过路由来改变 href

对于 SPA (单页面应用程序)，我们常常使用前端路由来改变链接的目标，并在浏览器端执行页面转换操作，而不需要反复向服务器发送请求。下面是 Vue.js 中的路由示例。

<!-- 定义路由 -->
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

<!-- 注册路由 -->
const router = new VueRouter({
  routes
})

<!-- 使用路由 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

<!-- 在相应位置显示路由注入的 HTML 组件 -->
<router-view></router-view>

结论

href 属性是一个非常重要的 HTML 属性，可以用于链接到各种资源。同时，通过 JavaScript、后端编程或者路由等方法，我们可以动态地改变链接的 href 属性来适应不同的业务需求和用户行为。