vue的超链接使用示例：a 和 router-link

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

一, <a>的使用

在 Vue.js 中，你可以使用 <a> 标签结合 v-bind:href（或简写为 :href）指令来创建超链接。这允许你动态地绑定 URL 到超链接，URL 可以是数据属性或者表达式的值。下面是一个基础的例子：

<template>
  <div>
    <!-- 使用字符串直接赋值 -->
    <a href="https://www.example.com">Example</a>

    <!-- 使用 v-bind 或 : 绑定动态 URL -->
    <a :href="url">Dynamic Link</a>

    <!-- 也可以使用表达式 -->
    <a :href="'https://www.' + website">Website</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com',
      website: 'example.com'
    };
  }
}
</script>

在这个例子中，url 和 website 是组件的数据属性，它们的值会被动态地绑定到超链接的 href 属性上。

二, <router-link>的使用

如果你想在单页应用中使用 Vue Router 进行页面跳转而不是直接跳转到外部 URL，你应该使用 <router-link> 组件。这是一个 Vue Router 提供的专门用于内部路由导航的组件，它可以替代普通的 <a> 标签：

<template>
  <div>
    <!-- 使用 router-link 进行内部页面跳转 -->
    <router-link to="/">Home</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
  </div>
</template>

在这个例子中，to 属性用于指定目标路由的名称或路径。如果目标路由有参数，你还可以使用对象形式的 to 属性：

<router-link :to="{ name: 'post', params: { id: 1 } }">Post 1</router-link>

这将会根据你的路由配置跳转到对应的页面。在 Vue Router 的配置中，你可以定义每个路由的 name 属性，这样在使用 <router-link> 时就可以通过名字来引用路由，而不需要硬编码路径。