踩坑日记(2)

项目场景：

vue单页面项目, 点击a标签在新窗口打开页面

---

问题描述：

点击a标签在新窗口打开artistDetail页面或userIntroduction页面, 但是打开的页面, 却是项目根目录页面, 检查浏览器地址栏, url为'/artistDetail?arId=...#/'或'/userIntroduction?uid=...#/'
原代码如下：

<a target="_blank" :href="(item.type == 0) ? ('/artistDetail?arId=' + ar.userId) : ('/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</a>

---

原因分析：

虽然使用a标签, url确实变了, 但是vue单页面使用vue-router进行页面跳转, 实际路由路径是'/', 即根路径, 使用vue-devtools查看$route, 路径确实是'/'

---

解决方案：

办法一: 将a标签换成router-link标签, 代码如下:

<router-link target="_blank" :to="(item.type == 0) ? ('/artistDetail?arId=' + ar.userId) : ('/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</router-link>

办法二: 修改a标签的路径 (这里的路由模式是默认的hash模式), 其实就是在路径前面加#, 代码如下:

<a target="_blank" :href="(item.type == 0) ? ('/#/artistDetail?arId=' + ar.userId) : ('/#/userIntroduction?uid=' + ar.userId)">{{ ar.userName }}</a>

更换后, 问题解决, 使用vue-devtools查看$route, 路径也正确了