vue利用a标签跳转页面 出现 `http://xxxxxx/about#/about` 问题原因和解决方法

START

• 前段时间有小伙伴在vue项目中，路由跳转的时候，使用a标签去跳转路由，遇到跳转不生效，路径还是奇怪的http://xxxxxx/about#/about，记录一下这个问题。

1.问题

1.1 编写的代码:

<a href="/about">我是a标签，点击我跳转到关于页面</a>

1.2 问题描述

• 点击a标签页面跳转不生效；
• 点击之后路径从http://localhost:8080#/about变化为http://localhost:8080/about#/about；

2.问题分析与解决

1. 背景我说一下，首先我们知道vue单页面应用，有两种路由模式。一个叫hash，一个叫history。不清楚路由模式可以看我写的博客：我想理解 hash history 两种前端路由。

2. 跳转前的路径存在#号，可以很明显的得知，当前的项目的路由模式是使用的hash模式。

3. 我们一般路由跳转，创建的例如 <router-link to="/about">About</router-link>,其实底层就是a标签。

模式	代码	页面展示
history	<router-link to="/about">About</router-link>	<a href="/about" class="">About</a>
hash	<router-link to="/about">About</router-link>	<a href="#/about" class="">About</a>

解决答案：
写到这里答案就呼之欲出了，其实本质<router-link/>也是利用a标签切换路由的，我们写原生的a标签也是没问题的.但是我们a标签的路径需要和我们路由模式匹配。

• 如果是hash路由，使用href="#/xxxx"进行跳转；
• 如果是history路由，使用href="/xxxx"进行跳转；

xxxx可替换为你想要跳转的路径

其他

a标签基本介绍

首先看看我们的a标签<a></a>的W3C基本介绍：

• <a>标签定义超链接，用于从一个页面链接到另一个页面;
• <a>元素最重要的属性是 href 属性，它指定链接的目标

href属性可以设置的URL:

• 绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm” rel=“external nofollow” target=“_blank” ）
• 相对 URL - 指向站点内的某个文件（href=“index.html”）
• 锚 URL - 指向页面中的锚（href=“#top”）

END

• 其实是一个很简单的问题，一一对应即可。