vue利用a标签跳转页面 出现 `http://xxxxxx/about#/about` 问题原因和解决方法
START前段时间有小伙伴在vue项目中,路由跳转的时候,使用a标签去跳转路由,遇到跳转不生效,路径还是奇怪的http://xxxxxx/about#/about,记录一下这个问题。a标签基本介绍首先看看我们的a标签<a></a>的W3C基本介绍:<a>标签定义超链接,用于从一个页面链接到另一个页面;<a>元素最重要的属性是 href 属性,它指定链
·
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.问题分析与解决
-
背景我说一下,首先我们知道vue单页面应用,有两种路由模式。一个叫
hash
,一个叫history
。不清楚路由模式可以看我写的博客:我想理解 hash history 两种前端路由。 -
跳转前的路径存在
#
号,可以很明显的得知,当前的项目的路由模式是使用的hash模式。 -
我们一般路由跳转,创建的例如
<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
- 其实是一个很简单的问题,一一对应即可。
更多推荐
已为社区贡献5条内容
所有评论(0)